/* Home em capítulos (issues #4 e #7). Escala tipográfica própria, isolada em .home-page:
   as telas internas continuam compactas (app.css). */
.home-page { font-size: 15px; background: var(--bg); }
.home-page .footer { font-size: 13px; }
.home-chapters { --chapter-h: calc(100svh - var(--topbar-h)); --nav-h: 56px; }
.chapter { position: relative; min-height: var(--chapter-h); display: flex; align-items: center; padding: clamp(14px, 3.4vh, 56px) 0 calc(var(--nav-h) + clamp(12px, 2.6vh, 40px)); scroll-margin-top: var(--topbar-h); }
.chapter:nth-child(even) { background: color-mix(in srgb, var(--surface) 70%, var(--bg)); }
.chapter-inner { width: min(1680px, calc(100% - clamp(32px, 6vw, 120px))); margin: 0 auto; }
/* #15 o header da home usa a mesma margem dos capítulos: logo alinhada ao texto do hero, ações à borda direita */
.home-page .topbar .inner { width: min(1680px, calc(100% - clamp(32px, 6vw, 120px))); max-width: none; padding: 0; }
.chapter .eyebrow { font-size: .78rem; letter-spacing: .14em; margin-bottom: clamp(6px, 1.4vh, 12px); }
/* títulos crescem com a largura E com a altura: numa tela baixa (notebook com zoom) nada desce para baixo da faixa */
.chapter h1, .chapter h2 { font-size: clamp(1.7rem, min(3.4vw, 6.2vh), 3.4rem); line-height: 1.06; letter-spacing: -.035em; margin: 0 0 clamp(10px, 2.2vh, 18px); }
.chapter h1 { font-size: clamp(2rem, min(4vw, 7.4vh), 4.1rem); }
.chapter :is(h1, h2) em { font-style: normal; background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.chapter h3 { font-size: 1.08rem; }
.chapter-lead { font-size: clamp(.95rem, min(1.15vw, 2.4vh), 1.2rem); line-height: 1.6; color: var(--text-2); max-width: 62ch; }
.chapter-lead strong, .heading-aside strong { color: var(--text); }
.chapter-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(12px, 2.6vh, 22px); }
.chapter .btn-lg { padding: 12px 22px; font-size: 1rem; border-radius: 12px; }
.chapter-heading { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(20px, 4vw, 80px); align-items: end; margin-bottom: clamp(18px, 3.4vh, 40px); }
.heading-aside { margin: 0; color: var(--text-2); font-size: clamp(.98rem, 1.05vw, 1.12rem); line-height: 1.6; }

/* 1. Hero com globo animado */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(24px, 4vw, 80px); align-items: center; }
/* título em duas linhas: "mais divertidas e organizadas!" nunca quebra; a fonte acompanha a largura da coluna */
.chapter-hero h1 { font-size: clamp(2rem, min(3.3vw, 7.4vh), 3.7rem); }
@media (min-width: 641px) { .chapter-hero .nowrap-line { white-space: nowrap; } }
.hero-checks { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; padding: 0; margin: clamp(10px, 2.4vh, 20px) 0 0; color: var(--text-2); font-weight: 600; }
.hero-checks li { display: flex; align-items: center; gap: 6px; }
.hero-checks .ico { color: var(--green); }
.hero-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: clamp(12px, 3vh, 44px) 0 0; }
.hero-stats div { padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.hero-stats dd { margin: 0; font-size: clamp(1.4rem, 2vw, 2rem); font-weight: 900; color: var(--primary); order: -1; }
.hero-stats div { display: flex; flex-direction: column; }
.hero-stats dt { font-size: .78rem; color: var(--text-2); font-weight: 700; }
/* coluna da direita só com o globo, centrado na coluna e na altura do bloco de texto */
.hero-art { position: relative; display: grid; place-items: center; }
.hero-globe { width: min(72%, 470px, 56vh); filter: drop-shadow(0 30px 40px rgba(97, 93, 250, .28)); }
.globe-svg { width: 100%; height: auto; overflow: visible; --gap: var(--bg); }
.globe-float { animation: globe-float 6s ease-in-out infinite; transform-box: view-box; }
@keyframes globe-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.hero-art.is-paused .globe-float { animation-play-state: paused; }
/* Contorno do vão (cor do fundo na faixa, branco no avião) só enquanto algo se move: em repouso é a logo exata. */
.globe-band path { stroke: var(--gap); stroke-width: 0; }
.globe-plane-shape { stroke: #fff; stroke-width: 0; transition: stroke-width .2s; }
[data-globe].is-moving .globe-band path { stroke-width: var(--gap-stroke); }
[data-globe].is-moving .globe-plane-shape { stroke-width: var(--gap-stroke); }
/* rastro do avião na volta ao mundo */
.globe-trail-dot { fill: #fff; stroke: var(--primary); stroke-width: .9; }
/* "Pausar"/"Continuar": pequeno, no rodapé do capítulo, alinhado à margem direita do conteúdo, acima da faixa */
.art-toggle { position: absolute; right: calc((100% - min(1680px, calc(100% - clamp(32px, 6vw, 120px)))) / 2); bottom: calc(var(--nav-h) + clamp(6px, 1.4vh, 16px)); display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); font: 700 .68rem/1.4 var(--font); cursor: pointer; }
.art-toggle:hover { color: var(--primary); border-color: var(--primary); }
.art-toggle .ico { width: 11px; height: 11px; }
.art-toggle.is-paused .ico:first-child, .art-toggle:not(.is-paused) .ico:nth-child(2) { display: none; }

/* Cores chapadas na home: o degradê fica só no destaque <em> dos títulos. Os selos usam um tom só, o da marca
   (os de milhas e conquistas mantêm a cor de cada tipo, que é o significado delas). */
.home-chapters .icon-badge { background: var(--tone); }

/* 2. Como funciona */
.how-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 22px); }
.how-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: start; padding: clamp(14px, 1.6vw, 24px); border-radius: 18px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.how-card .icon-badge { grid-row: span 2; }
.how-card h3 { margin: 4px 0 2px; }
.how-card p { margin: 0; color: var(--text-2); line-height: 1.55; }

/* 3. Pilares com ilustrações */
.pillar-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 22px); }
.pillar-card { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.pillar-card figure { margin: 0; aspect-ratio: 3 / 2; max-height: 34vh; overflow: hidden; background: var(--accent-50); }
.pillar-card img { width: 100%; height: 100%; object-fit: cover; }
.pillar-body { position: relative; padding: 16px 18px 18px; flex: 1; display: flex; flex-direction: column; align-items: flex-start; }
.pillar-body h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 1.2rem; }
.pillar-body h3 .ico { color: var(--primary); }
.pillar-body p { color: var(--text-2); line-height: 1.55; flex: 1; }
/* número do pilar: selo no canto superior esquerdo da ilustração, igual nos três cartões */
.pillar-card figure { position: relative; }
.pillar-n { position: absolute; left: 14px; top: 14px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--primary); color: #fff; font-size: 1.15rem; font-weight: 900; line-height: 1; box-shadow: 0 4px 12px rgba(47, 48, 82, .25); }

/* 4. Gamificação: ilustração e título à esquerda; à direita um bloco enxuto de dados (uma linha por item) */
.game-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 72px); align-items: center; }
.game-story { display: flex; flex-direction: column; min-height: 0; }
.game-story .chapter-lead { margin-bottom: 0; }
.game-figure { margin: clamp(10px, 2.2vh, 20px) 0 0; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 3 / 2; max-height: calc(var(--chapter-h) - var(--nav-h) - clamp(220px, 34vh, 330px)); }
.game-figure img { width: 100%; height: 100%; object-fit: cover; }
.chapter .game-sub { display: flex; align-items: baseline; gap: 10px; margin: clamp(10px, 2.2vh, 20px) 0 8px; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.chapter .game-sub:first-child { margin-top: 0; }
.chapter .game-sub small { font-size: .72rem; letter-spacing: 0; text-transform: none; font-weight: 700; color: var(--muted); }
.miles-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.miles-list li { display: flex; align-items: center; gap: 10px; padding: 7px 12px 7px 8px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); white-space: nowrap; min-width: 0; }
.miles-list b { font-size: .98rem; }
.miles-list span { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; }
/* trilha de níveis numa linha: pontos ligados por um traço, nome embaixo (a meta de cada um no title) */
.level-path { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); list-style: none; padding: 0; margin: 0; }
.level-path::before { content: ""; position: absolute; left: 8%; right: 8%; top: 13px; height: 2px; background: var(--border); }
.level-path li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; text-align: center; }
.level-path b { font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.level-dot { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--primary); color: #fff; box-shadow: 0 0 0 4px var(--bg); }
.chapter:nth-child(even) .level-dot { box-shadow: 0 0 0 4px color-mix(in srgb, var(--surface) 70%, var(--bg)); }
.game-achievements { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.game-achievements .achievement { padding: 8px 12px; }
.game-achievements .achievement h4 { font-size: .9rem; }
.game-achievements .achievement p { display: none; }
.game-cta { margin: clamp(10px, 2.2vh, 18px) 0 0; }

/* 5. Viagens */
.trips-showcase { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(10px, 1.1vw, 18px); }
.trips-showcase .trip-card .body p, .trips-showcase .trip-card .summary { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.trips-showcase .trip-card .cover { aspect-ratio: auto; height: clamp(110px, 25vh, 230px); }
.trips-showcase .trip-card .cover img { width: 100%; height: 100%; object-fit: cover; }
.trips-showcase .trip-card h3 { font-size: .92rem; }

/* 6. Memórias e CTA */
.split-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 80px); align-items: center; }
.chapter-figure { margin: 0; border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-lg); max-height: 70vh; }
.chapter-figure img { width: 100%; height: 100%; object-fit: cover; }
.feature-list { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; color: var(--text-2); }
.feature-list li { display: flex; gap: 10px; align-items: flex-start; }
.feature-list .ico { color: var(--primary); margin-top: 2px; }

/* 7. Canais e ranking */
.people-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); }
.people-col h3 { display: flex; align-items: center; gap: 8px; }
.people-col h3 a { margin-left: auto; font-size: .82rem; }
.people-row { display: flex; align-items: center; gap: 12px; padding: clamp(6px, 1.1vh, 10px) 12px; margin-bottom: clamp(5px, 1vh, 8px); border-radius: 14px; background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.people-row:hover { text-decoration: none; border-color: var(--primary); }
.people-row small { display: block; color: var(--text-2); }

/* 8. Ajuda: no desktop pergunta e resposta inteiras (sem clique); até 900 px o card mostra o começo e abre a janela */
.faq-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.faq-card { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: 700 1rem var(--font); box-shadow: var(--shadow); }
.faq-card .faq-q { flex: 1; min-width: 0; }
.faq-card .faq-a { display: block; margin-top: 4px; font: 500 .84rem/1.45 var(--font); color: var(--text-2); }
.faq-card .icon-badge { flex: 0 0 auto; }
.faq-open { display: none; }
@media (max-width: 900px) {
  .faq-card { align-items: center; }
  .faq-card .faq-a { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  /* o botão cobre o card inteiro: o toque em qualquer ponto abre a resposta completa */
  .faq-open { display: grid; place-items: center end; position: static; padding: 0; border: 0; background: none; color: var(--primary); cursor: pointer; }
  .faq-open::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .faq-card:has(.faq-open:hover) { border-color: var(--primary); }
}
.faq-dialog { width: min(560px, calc(100vw - 32px)); font-size: 15px; }

/* Capítulos que ocupam o palco inteiro (05 Viagens, 08 Ajuda): o título começa no alto, na altura dos capítulos
   cheios, e a grade cresce até perto da faixa. Numa tela alta a grade tem teto e o conjunto volta ao centro. */
@media (min-width: 1101px) {
  .chapter-fill { align-items: stretch; }
  .chapter-fill > .chapter-inner { display: flex; flex-direction: column; justify-content: center; padding-top: clamp(0px, 1.7vh, 14px); }
  .chapter-fill .trips-showcase { flex: 1 1 0px; }
  /* capas crescem com a altura; título, datas e resumo de todos os cartões dividem a mesma linha de baixo (subgrid) */
  .chapter-fill .trips-showcase { grid-template-rows: minmax(clamp(110px, 18vh, 170px), 1fr) auto; row-gap: 0; max-height: calc(min(17vw, 290px) + 200px); }
  .chapter-fill .trips-showcase .trip-card { grid-row: span 2; display: grid; grid-template-rows: subgrid; }
  .chapter-fill .trips-showcase .trip-card .cover { height: auto; min-height: clamp(110px, 18vh, 170px); }
  .chapter-fill .trips-showcase .trip-card .cover img { position: absolute; inset: 0; }
  /* perguntas com a resposta inteira: cada fileira na altura do card mais alto dela (sem sobra no pé) */
  .chapter-fill .faq-grid { grid-auto-rows: auto; }
}

/* Barra de capítulos (fixa no rodapé da tela) */
.chapter-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; height: var(--nav-h, 56px); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 14px; padding: 0 clamp(10px, 1.4vw, 24px); background: rgba(31, 30, 74, .96); color: #fff; backdrop-filter: blur(12px); border-top: 1px solid rgba(255, 255, 255, .1); transition: transform .3s ease, opacity .3s ease; font-size: 13px; }
.chapter-nav.is-outside { transform: translateY(100%); opacity: 0; pointer-events: none; }
.chapter-step { display: flex; align-items: center; gap: 9px; min-width: 0; max-width: min(360px, 100%); padding: 6px 10px; border: 0; border-radius: 12px; background: transparent; color: #fff; font: inherit; text-align: left; cursor: pointer; transition: background .15s; }
.chapter-step.is-prev { justify-self: start; }
.chapter-step.is-next { justify-self: end; text-align: right; }
.chapter-step:hover:enabled { background: rgba(255, 255, 255, .1); }
.chapter-step:disabled { opacity: .3; cursor: default; }
.chapter-arrow { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto; border-radius: 9px; border: 1px solid rgba(255, 255, 255, .28); }
.chapter-step:hover:enabled .chapter-arrow { background: var(--accent); border-color: var(--accent); color: #1f1e4a; }
.chapter-step-icon { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto; border-radius: 10px; background: rgba(255, 255, 255, .12); color: #9fe8f2; }
.chapter-step-icon:empty { display: none; }
.chapter-step-icon svg { width: 18px; height: 18px; }
.chapter-step-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.chapter-step-text small { font-size: .62rem; text-transform: uppercase; letter-spacing: .12em; opacity: .65; font-weight: 800; }
.chapter-step-text b { font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chapter-track { display: flex; align-items: center; gap: 4px; min-width: 0; }
.chapter-item { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 9px; border-radius: 11px; color: rgba(255, 255, 255, .7); font: 700 .78rem var(--font); text-decoration: none; white-space: nowrap; }
.chapter-item:hover { background: rgba(255, 255, 255, .1); color: #fff; text-decoration: none; }
.chapter-item span { display: none; }
.chapter-item[aria-current] { background: #fff; color: #1f1e4a; padding: 0 12px; }
.chapter-item[aria-current] span { display: inline; }
.chapter-item[aria-current] .ico { color: var(--primary); }
/* setas ← → coladas no capítulo atual e dica "Use as setas" junto delas (teclas .band-key e .band-hint do app.css): o
   home.js só troca a ordem visual, então a seta anda com o atual sem perder o foco */
/* na trilha a dica ocupa lugar: sem o position absolute da faixa do app, ela nunca fica por cima de um ícone */
.chapter-track .band-hint { position: static; transform: none; margin: 0 4px; animation: hint-float 1.8s ease-in-out infinite; }
.chapter-track .band-hint.thanks { color: #6ee7b7; animation: hint-thanks .9s ease-out forwards; }
.chapter-track .band-hint[hidden] { display: none; }
@keyframes hint-float { 50% { transform: translateY(-2px); } }
@keyframes hint-thanks { 0% { opacity: 1; transform: scale(1); } 35% { opacity: 1; transform: scale(1.15); } 100% { opacity: 0; transform: scale(1.3); } }
@media (max-width: 1199px) { .chapter-track .band-hint { display: none; } }
@media (max-width: 900px) { .chapter-track .band-key { display: none; } }

/* Telas menores e preferência por menos movimento */
@media (max-width: 1100px) {
  .hero-grid, .split-grid, .game-grid, .chapter-heading { grid-template-columns: minmax(0, 1fr); }
  .hero-art { order: -1; }
  .hero-globe { width: min(300px, 70vw); }
  .art-toggle { bottom: auto; top: 12px; }
  .how-grid, .pillar-grid, .faq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trips-showcase { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chapter { min-height: auto; }
}
@media (max-width: 640px) {
  .how-grid, .pillar-grid, .trips-showcase, .faq-grid, .people-grid, .game-achievements { grid-template-columns: minmax(0, 1fr); }
  .level-path { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 10px; } .level-path::before { display: none; }
  .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chapter-step-text { display: none; }
  .chapter-item:not([aria-current]) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .globe-float, .chapter-track .band-hint { animation: none !important; }
  .chapter-nav { transition: none; }
}

/* Na home o chat abre pelo botão "Assistente" da barra de capítulos; o botão flutuante só aparece no celular,
   onde a barra esconde os utilitários. */
.home-page .ic-chat-launcher { bottom: calc(var(--nav-h, 56px) + 14px); }
.home-page .consent { right: 8px; bottom: calc(var(--nav-h, 56px) + 8px); max-height: calc(100svh - var(--nav-h, 56px) - 26px); }
.home-page:has(.consent:not([hidden])) .art-toggle { top: clamp(12px, 2vh, 24px); bottom: auto; }
@media (min-width: 641px) { .home-page .ic-chat-launcher { display: none !important; } }
@media (max-width: 1240px) { .chapter-step-text b { max-width: 150px; } }
@media (max-width: 1000px) { .chapter-step-text { display: none; } }
.people-videos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.people-video { position: relative; display: block; aspect-ratio: 16 / 8; border-radius: 12px; overflow: hidden; background: var(--surface-2); color: #fff; }
.people-video img { width: 100%; height: 100%; object-fit: cover; }
.people-video span { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 5px; padding: 5px 8px; font-size: .74rem; font-weight: 800; line-height: 1.2; background: rgba(31, 30, 74, .78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.people-video:hover { text-decoration: none; filter: brightness(1.05); }

/* #87/#88 celular: a navegação da home é a barra inferior do site (Início, Explorar, +, IA, Entrar), a mesma das
   outras telas; a faixa dos capítulos fica só no desktop, e o rolar com o dedo passa pelos capítulos */
@media (max-width: 900px) {
  .chapter-nav { display: none !important; }
  .home-page { --nav-h: 64px; }
  /* primeira dobra: globo pequeno, título, texto e botões visíveis sem rolar */
  .chapter-hero { padding-top: 14px; }
  .chapter-hero .hero-grid { gap: 6px; }
  .chapter-hero .hero-globe { width: min(150px, 40vw); filter: drop-shadow(0 14px 20px rgba(97, 93, 250, .24)); }
  .chapter-hero .eyebrow { font-size: .68rem; letter-spacing: .1em; }
  .chapter-hero h1 { font-size: clamp(1.7rem, 7.6vw, 2.3rem); margin-bottom: 10px; }
  .chapter-hero .chapter-lead { font-size: .95rem; line-height: 1.5; }
  .chapter-hero .chapter-actions { margin-top: 12px; gap: 8px; }
  .chapter-hero .chapter-actions .btn-lg { flex: 1 1 0; justify-content: center; padding: 11px 12px; font-size: .95rem; }
  .art-toggle { top: 10px; }
}