/* GUI — A CONSOLIDAÇÃO DE UX. Esta folha entra POR ÚLTIMO e veste o que a rodada mudou. Ela não redesenha o produto: onde o componente já tinha classe e forma, ela ajusta; onde a rodada criou componente novo — tutorial, cabeçalho com sino e avatar, bloco de calendário recolhível, CTA de ingresso, Conta, Notificações, busca agrupada, prateleira por destino — ela desenha. Nenhuma regra aqui alcança `.home-gui`, `.h-hero`, `.h-sec` ou qualquer seletor da Home A, com UMA exceção declarada: os resultados de busca (`.bg-*`), que passaram a ser o mesmo componente nas duas Homes. */ /* ==================================================================== 1. CABEÇALHO INTERNO — sino + avatar, sem o G (§46, §49, §50) ==================================================================== */ .shell-acoes { flex: none; display: flex; align-items: center; gap: 6px; } .shell-ic, .shell-avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--linha); background: var(--papel-2); display: grid; place-items: center; font-size: 16px; color: var(--tinta-fraca); padding: 0; cursor: pointer; } .shell-avatar { background: linear-gradient(140deg, var(--acento), #5c3a86); border-color: transparent; color: #fff; font-size: 17px; } .shell-ic:focus-visible, .shell-avatar:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; } /* O SINO NÃO TEM SELO (§83): não há notificação para contar, e um ponto vermelho inventado é a mentira mais barata de uma barra superior. */ .shell-ic::after { content: none; } /* O DESENHO DO SINO (§22, §23). O ícone era `◔` — um círculo com um quadrante. Em 36px de botão ele não comunica «notificações»: comunica RELÓGIO, que é exatamente o ícone que a §45 da consolidação tinha acabado de tirar deste lugar. Trocar o glifo por outro glifo não resolveria: não existe sino em Unicode que não venha como emoji colorido (🔔), e um emoji ao lado de um avatar monocromático é um corpo estranho na barra. O sino é então traçado — 24×24, `currentColor`, contorno de 1.8 — que é a MESMA linguagem dos ícones da Home A (o coração do hero, a lupa da busca). Ele herda a cor do botão, acompanha o foco e não tem detalhe para perder quando reduzido. */ .shell-ic svg { display: block; } /* ==================================================================== 2. BUSCA AGRUPADA — a mesma nas duas Homes (§9) ==================================================================== */ .bg-res { margin-top: 8px; background: var(--papel-2); border: 1px solid var(--linha); border-radius: 14px; overflow: hidden; } .bg-grupo + .bg-grupo { border-top: 1px solid var(--linha); } .bg-grupo-tit { margin: 0; padding: 9px 14px 5px; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-clara); } .bg-lista { list-style: none; margin: 0; padding: 0 0 6px; } .bg-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 14px; border: 0; background: transparent; text-align: left; font: inherit; color: var(--tinta); cursor: pointer; } .bg-item:hover, .bg-item:focus-visible { background: rgba(123, 79, 176, .07); outline: none; } .bg-nome { flex: 1 1 auto; min-width: 0; line-height: 1.3; } .bg-onde { flex: none; font-size: .74rem; color: var(--tinta-clara); } .bg-seta { flex: none; color: var(--tinta-clara); } .bg-vazio { margin: 0; padding: 14px; color: var(--tinta-fraca); font-size: .88rem; } /* ==================================================================== 3. TUTORIAL "COMO USAR UM GUIDE" (§3 a §6) ==================================================================== */ .tg { position: fixed; inset: 0; z-index: 120; display: flex; align-items: flex-end; justify-content: center; background: rgba(20, 16, 30, .55); padding: 16px; padding-bottom: calc(16px + var(--seguro-b)); } .tg[hidden] { display: none; } body.com-tutorial { overflow: hidden; } .tg-caixa { width: 100%; max-width: 420px; max-height: 92dvh; overflow-y: auto; background: var(--papel-2); border-radius: 22px; padding: 16px 18px calc(18px + var(--seguro-b)); box-shadow: 0 -10px 40px rgba(20, 16, 30, .3); } .tg-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .tg-rot { margin: 0; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-clara); } .tg-pular { border: 0; background: transparent; color: var(--acento); font: inherit; font-size: .88rem; font-weight: 600; padding: 4px 2px; cursor: pointer; } .tg-tit { margin: 14px 0 6px; font-size: 1.2rem; line-height: 1.25; letter-spacing: -.01em; } .tg-txt { margin: 0; color: var(--tinta-fraca); line-height: 1.5; } .tg-conta { margin: 8px 0 0; font-size: .78rem; color: var(--tinta-clara); text-align: center; } .tg-pontos { list-style: none; display: flex; gap: 6px; justify-content: center; margin: 18px 0 12px; padding: 0; } .tg-pontos li { width: 7px; height: 7px; border-radius: 50%; background: var(--linha); } .tg-pontos li.on { background: var(--acento); width: 20px; border-radius: 4px; } .tg-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .tg-nao { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--tinta-fraca); margin-bottom: 12px; cursor: pointer; } .tg-nao input { width: 17px; height: 17px; accent-color: var(--acento); } .tg-acoes { display: flex; gap: 10px; } .tg-bt { flex: 1 1 auto; border: 0; border-radius: 13px; padding: 13px 16px; font: inherit; font-weight: 600; cursor: pointer; } .tg-bt-pri { background: var(--acento); color: #fff; } /* §40 — OS DOIS SÃO AÇÕES, e têm a mesma altura e o mesmo direito à linha. `flex: 0 0 auto` fazia «Voltar» encolher até a palavra, ao lado de um «Próximo» que tomava o resto: um lia como botão, o outro como link. A distinção passa a ser só de preenchimento — e «Próximo» continua sendo o primário, com mais peso na linha. */ .tg-bt-sec { background: var(--papel); color: var(--tinta); border: 1px solid var(--linha); flex: 1 1 0; } .tg-bt-pri { flex: 1.4 1 0; } /* O gesto de swipe não pode ser confundido com seleção de texto arrastada. */ .tg-caixa { touch-action: pan-y; } /* --- as artes: desenhadas, nunca fotografadas (§13) --- */ .tg-arte { margin-top: 14px; border-radius: 16px; background: var(--papel); border: 1px solid var(--linha); padding: 16px; min-height: 132px; display: flex; flex-direction: column; justify-content: center; gap: 8px; } .tg-reg { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .tg-pin { width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: .72rem; font-weight: 700; background: var(--linha); color: var(--tinta-fraca); } .tg-reg-on .tg-pin { background: var(--acento); color: #fff; } .tg-barra { flex: 1 1 auto; height: 9px; border-radius: 5px; background: var(--linha); } .tg-reg-on .tg-barra { background: rgba(123, 79, 176, .35); } .tg-ativs { list-style: none; margin: 4px 0 4px 30px; padding: 0; width: 100%; display: grid; gap: 5px; } .tg-ativs li { height: 7px; border-radius: 4px; background: rgba(123, 79, 176, .18); } .tg-ativs li:nth-child(2) { width: 78%; } .tg-ativs li:nth-child(3) { width: 56%; } .tg-arte-mapa { padding: 10px; } .tg-mapa-fundo { fill: #eef1f4; } .tg-mapa-via { fill: none; stroke: #dfe4ea; stroke-width: 6; stroke-linecap: round; } .tg-mapa-via2 { fill: none; stroke: #dfe4ea; stroke-width: 4; } .tg-mapa-pinos circle { fill: var(--acento); } .tg-mapa-pinos text { fill: #fff; font-size: 13px; font-weight: 700; text-anchor: middle; font-family: inherit; } .tg-pa-transporte { display: flex; align-items: center; justify-content: center; gap: 14px; } .tg-pa-bt { position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--papel-2); border: 1px solid var(--linha); color: var(--tinta-fraca); font-size: 18px; } .tg-pa-bt b { position: absolute; bottom: 6px; font-size: .55rem; font-weight: 700; } .tg-pa-play { width: 56px; height: 56px; background: var(--acento); color: #fff; border-color: transparent; } .tg-pa-barra { height: 5px; border-radius: 3px; background: var(--linha); margin: 12px 4px 0; } .tg-pa-barra span { display: block; width: 38%; height: 100%; border-radius: 3px; background: var(--acento); } .tg-pa-vel { display: flex; gap: 5px; justify-content: center; margin-top: 10px; } .tg-pa-vel span { font-size: .66rem; padding: 3px 7px; border-radius: 8px; background: var(--papel-2); border: 1px solid var(--linha); color: var(--tinta-clara); } .tg-pa-vel .on { background: var(--acento); color: #fff; border-color: transparent; } .tg-cal-bloco { display: flex; align-items: center; justify-content: space-between; background: var(--papel-2); border: 1px solid var(--linha); border-radius: 12px; padding: 10px 12px; } .tg-cal-tit { font-weight: 600; font-size: .9rem; } .tg-cal-dia { font-size: .78rem; color: var(--acento); font-weight: 600; } .tg-cal-linha { display: flex; gap: 8px; } .tg-cal-campo { flex: 1 1 0; height: 30px; border-radius: 9px; background: var(--linha); } .tg-cal-cta { text-align: center; background: var(--acento); color: #fff; border-radius: 12px; padding: 10px; font-weight: 600; font-size: .88rem; } /* ==================================================================== 4. ACTIVITY DETAIL — calendário recolhível, texto completo, ingresso ==================================================================== */ /* --- Ver texto completo: onde o "Remover" estava (§32) --- */ .btn-texto-completo { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; margin: 12px 0 0; padding: 13px 16px; border: 1px solid var(--linha); border-radius: 13px; background: var(--papel-2); color: var(--tinta); font: inherit; font-weight: 600; cursor: pointer; } .btn-texto-completo:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; } .btn-texto-completo .chev { color: var(--tinta-clara); } /* ==================================================================== O BLOCO DE CALENDÁRIO — §13 a §15, §19 a §23 ==================================================================== TUDO CABE DENTRO DO CARTÃO, e isso é uma regra medida, não uma intenção: o bloco tem `overflow: hidden`, o corpo tem `min-width: 0` em cada nível de flex, e os dois `` com «2h · ideal» empurra a grade e vaza pela borda direita. O PADDING ENCOSTOU O CONTEÚDO NA ESQUERDA (§19). Eram 14px de cada lado dentro de um cartão que já tem 16px de margem da tela: 30px só de ar antes da primeira letra, num telefone de 393px. */ /* ================================================================== O DESALINHAMENTO DO BLOCO — UMA GOTEIRA SÓ, DOS DOIS LADOS (§11 a §14) ================================================================== O QUE FOI MEDIDO. Com o bloco expandido e a atividade agendada, a 393px, TODOS os elementos internos ficavam a 15px da borda esquerda e a 13px da direita — cabeçalho, data, campo «Dia», o par Início/Duração, o resumo e o par Salvar/Remover. Dois pixels, em todas as linhas, sempre para o mesmo lado. A CAUSA. A goteira estava declarada duas vezes, e diferente das duas: `.calb-cab` com `padding: 12px 12px 12px 14px` e `.calb-corpo` com `padding: 0 12px 13px 14px`. Esquerda 14, direita 12. A rodada anterior reduziu a direita para 12 tentando devolver ar ao conteúdo, e esqueceu a esquerda em 14 — o resultado é um conteúdo que ENCOSTA na borda direita e respira na esquerda. Num cartão com contorno visível e 16px de raio, é isso que se lê como «escapou pela lateral». Não era `width`, não era `box-sizing` (`*{box-sizing:border-box}` é global), não era `min-width` e não era a grade: nada atravessa a borda em largura nenhuma entre 320px e 1440px — a varredura de bounding boxes do §35 prova isso a cada corrida. Era a goteira. A CORREÇÃO. Uma variável, um valor, os dois lados. Quem declarar padding lateral dentro do bloco declara `var(--calb-gut)` — e não um número. */ .calb-bloco { --calb-gut: 14px; /* a goteira interna, igual nos dois lados */ --calb-ic: 15px; /* a largura reservada ao ícone do cabeçalho */ --calb-gap: 9px; /* e o espaço entre ele e o título */ margin: 14px 0 0; border: 1px solid var(--linha); border-radius: 16px; background: var(--papel-2); overflow: hidden; } /* --- o cabeçalho: título em cima, data embaixo (§17, §20) --- */ .calb-cab { width: 100%; display: flex; flex-direction: column; gap: 2px; padding: 12px var(--calb-gut); border: 0; background: transparent; font: inherit; color: var(--tinta); text-align: left; cursor: pointer; } .calb-cab:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; } .calb-cab-topo { display: flex; align-items: center; gap: var(--calb-gap); width: 100%; } /* A LARGURA DO ÍCONE É DECLARADA porque é dela que sai o recuo da data. Sem isto, o ícone mede o que o glifo `▦` medir na fonte que tiver carregado — e o recuo da linha de baixo deixa de bater com o título. */ .calb-ic { flex: none; width: var(--calb-ic); color: var(--acento); font-size: 1rem; line-height: 1; text-align: center; } .calb-tit { flex: 1 1 auto; font-weight: 700; font-size: 1rem; letter-spacing: -.01em; } .calb-chev { flex: none; color: var(--tinta-clara); } /* A DATA GANHOU LINHA PRÓPRIA. Ela é a informação que o bloco recolhido existe para dar, e tem espaço para o intervalo inteiro sem reticências. O RECUO É CALCULADO, E NÃO CHUTADO. Era `padding-left: 25px` — um número escrito à mão para «dar mais ou menos a largura do ícone». Media 22.8px na prática, e a data ficava 2.2px à direita do título, bem no lugar onde o olho procura uma coluna. Agora ela se alinha com o título por construção. */ .calb-quando { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding-left: calc(var(--calb-ic) + var(--calb-gap)); } .calb-data { font-size: .86rem; font-weight: 600; color: var(--acento); } .calb-hora { font-size: .8rem; color: var(--tinta-fraca); } .calb-corpo { padding: 0 var(--calb-gut) 13px; min-width: 0; } .calb-corpo[hidden] { display: none; } .calb-bloco .agenda-edit { border: 0; padding: 0; margin: 0; background: transparent; min-width: 0; } .calb-bloco .escolher-dia:empty { display: none; } /* Nenhum campo pode ser mais largo do que a coluna que o contém. */ .calb-bloco .campo { min-width: 0; } .calb-bloco select, .calb-bloco .sel-dia { width: 100%; max-width: 100%; min-width: 0; } /* O PAR INÍCIO/DURAÇÃO QUEBRA ANTES DE VAZAR (§15). A grade era `1fr 1fr` fixo: duas colunas em qualquer largura, inclusive naquela em que duas colunas não cabem. Enquanto houver largura, elas não vazam — a medição do §35 mostra que aguentam até 320px —, mas «enquanto houver» é uma promessa que depende do texto das opções, e o texto das opções depende do acervo. A REGRA É DUAS COLUNAS, E UMA QUANDO DUAS NÃO CABEM. A pergunta certa não é quanto mede a JANELA — é quanto mede o BLOCO, que muda de largura conforme a ficha, a gaveta ou a área de leitura em que ele estiver. Por isso a medida é uma consulta de contêiner, e não um `@media`. `auto-fit` foi tentado primeiro e está ERRADO aqui: a 648px ele criava QUATRO colunas, e os dois campos ficavam espremidos à esquerda com metade do bloco vazia à direita. O par Início/Duração é um par — o teto é dois. Sem suporte a `@container`, o que vale é a declaração de cima: duas colunas com `minmax(0, 1fr)`, que a varredura do §35 prova não vazar nem a 320px. A degradação é o comportamento de hoje, e não um defeito novo. Dia continua atravessando por `1 / -1`, que vale igual nos dois casos. */ .calb-corpo { container-type: inline-size; } .calb-bloco .agenda-edit { grid-template-columns: repeat(2, minmax(0, 1fr)); } @container (max-width: 250px) { .calb-bloco .agenda-edit { grid-template-columns: minmax(0, 1fr); } } .btn-cal-add { width: 100%; border: 0; border-radius: 13px; padding: 13px 16px; background: var(--acento); color: #fff; font: inherit; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px; } /* --- SALVAR E REMOVER, LADO A LADO (§14) --- Duas colunas iguais: elas têm o mesmo peso de decisão dentro do bloco, e larguras diferentes sugeririam que uma é a ação principal. O «Remover» é distinguido pelo TRATAMENTO — fundo neutro, contorno — e não pelo tamanho. */ /* `.agenda-edit` é uma grade de duas colunas (regional.css). As ações e a confirmação atravessam as duas — sem isto elas cairiam numa coluna só e o par de botões ficaria com metade da largura do cartão. */ .calb-bloco .agenda-acoes, .calb-bloco .salvo { grid-column: 1 / -1; } /* A MESMA REGRA PARA OS BOTÕES (§16). Lado a lado é a forma preferida, e é a que vale no viewport principal do projeto — a medição confirma os dois em 393px. `wrap` com base de 116px é o que os faz EMPILHAR, em vez de espremer ou vazar, quando a largura deixar de existir. */ .agenda-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; } .agenda-acoes > button { flex: 1 1 116px; min-width: 0; padding: 12px 10px; border-radius: 13px; font: inherit; font-weight: 600; cursor: pointer; } .agenda-acoes .btn-salvar { border: 0; background: var(--acento); color: #fff; } .agenda-acoes .btn-salvar:disabled { background: var(--linha); color: var(--tinta-clara); cursor: default; } .agenda-acoes .btn-cal-remover { border: 1px solid var(--linha); background: transparent; color: var(--tinta-fraca); } .agenda-acoes .btn-cal-remover:hover { color: #a13c2c; border-color: #e0c3bb; } .calb-bloco .salvo { margin: 9px 0 0; font-size: .82rem; color: var(--acento); text-align: center; min-height: 0; display: block; } .calb-bloco .salvo[hidden] { display: none; } /* --- o texto da narração, e o bloco de detalhes (§16, §17) --- */ .narracao-texto { margin: 10px 0 0; padding: 14px 15px; background: var(--papel-2); border: 1px solid var(--linha); border-radius: 16px; } .narracao-texto p { margin: 0 0 12px; line-height: 1.62; } .narracao-texto p:last-child { margin-bottom: 0; } .det-bloco { margin: 14px 0 0; border: 1px solid var(--linha); border-radius: 16px; background: var(--papel-2); overflow: hidden; } .det-bloco > summary { list-style: none; cursor: pointer; padding: 13px 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; } .det-bloco > summary::-webkit-details-marker { display: none; } .det-bloco > summary::after { content: "▾"; margin-left: auto; color: var(--tinta-clara); font-weight: 400; } .det-bloco[open] > summary::after { content: "▴"; } .det-corpo { padding: 0 14px 14px; } .det-corpo h4 { margin: 4px 0 6px; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-clara); } .det-corpo p { margin: 0 0 10px; line-height: 1.55; } .det-corpo ul { margin: 0; padding-left: 18px; } .det-corpo li { margin-bottom: 6px; line-height: 1.45; } /* --- CTA de ingresso (§25) --- */ .btn-ingresso { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 12px 0 0; padding: 13px 16px; border: 1px solid var(--acento); border-radius: 13px; background: var(--papel-2); color: var(--acento); font-weight: 600; text-decoration: none; } .btn-ingresso .ic { font-size: 1rem; } .tk-prov { font-size: .76rem; font-weight: 500; color: var(--tinta-clara); } .tk-nota { margin: 12px 0 0; padding: 11px 13px; border-radius: 12px; background: rgba(123, 79, 176, .07); color: var(--tinta-fraca); font-size: .86rem; } /* --- aviso contextual de horário (§39) --- */ .aviso-hr { position: fixed; inset: 0; z-index: 130; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(20, 16, 30, .5); } .aviso-hr-caixa { width: 100%; max-width: 360px; background: var(--papel-2); border-radius: 18px; padding: 20px; box-shadow: 0 12px 40px rgba(20, 16, 30, .28); } .aviso-hr-tit { margin: 0 0 8px; font-weight: 700; display: flex; align-items: center; gap: 8px; } .aviso-hr-tit span { color: var(--acento); } .aviso-hr-txt { margin: 0 0 6px; color: var(--tinta-fraca); line-height: 1.5; } .aviso-hr-sub { margin: 0 0 16px; font-size: .8rem; color: var(--tinta-clara); } .aviso-hr-acoes { display: flex; } /* ==================================================================== 5. MAPA — arredores e bate-voltas (§16) ==================================================================== */ .mr-arredores { padding: 8px 12px 4px; border-bottom: 1px solid var(--linha); } .mr-arr-tit { margin: 0 0 6px; font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--tinta-clara); } .mr-arr-lista { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; overflow-x: auto; } .mr-arr-lista button { display: flex; align-items: center; gap: 7px; white-space: nowrap; border: 1px solid var(--linha); border-radius: 999px; background: var(--papel-2); padding: 5px 11px 5px 5px; font: inherit; font-size: .8rem; color: var(--tinta); cursor: pointer; } .mr-arr-km { color: var(--tinta-clara); font-size: .74rem; } .mr-arr-nota { margin: 6px 0 2px; font-size: .7rem; color: var(--tinta-clara); line-height: 1.35; } /* ==================================================================== 6. VITRINE DO GUIDE — o mapa saiu daqui (Bloco 1, §38) ==================================================================== Esta seção vestia «Onde ele te leva»: o seletor de vista, a moldura do mapa real e a nota dos arredores. A seção inteira foi removida da página comercial — mapa é experiência operacional do Guide, e não argumento de venda. AS REGRAS SAÍRAM JUNTO, E NÃO FICARAM ÓRFÃS. CSS morto para um componente removido é o convite mais barato para ele voltar: basta alguém colar o HTML e ele já vem estilizado. Dentro do Guide adquirido o mapa real continua inteiro, e é `mapa-real.js` + `regional.css` que o vestem (§39). */ /* ==================================================================== 7. PRATELEIRA POR DESTINO — Comprar e Meus guias (§70, §71, §73) ==================================================================== */ .pd-pais-sec + .pd-pais-sec { margin-top: 18px; } .pd-pais-tit { display: flex; align-items: baseline; gap: 8px; margin: 18px 0 8px; font-size: .9rem; font-weight: 700; } .pd-pais-n { font-size: .74rem; font-weight: 500; color: var(--tinta-clara); } .pd-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .pd-card { border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; background: var(--papel-2); } .pd-card.em-producao { opacity: .82; } .pd-abre { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px; border: 0; background: transparent; text-align: left; font: inherit; color: var(--tinta); cursor: pointer; } .pd-abre:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; } .pd-capa { flex: none; width: 76px; height: 76px; border-radius: 13px; overflow: hidden; display: block; background: var(--linha); } .pd-capa img { width: 100%; height: 100%; object-fit: cover; display: block; } .pd-capa-cor { background: var(--capa); display: grid; place-items: center; color: #fff; font-weight: 700; letter-spacing: .04em; } .pd-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .pd-linha { display: flex; align-items: baseline; gap: 10px; } .pd-nome { flex: 1 1 auto; font-weight: 700; font-size: 1rem; } .pd-preco { flex: none; font-weight: 700; color: var(--acento); } .pd-pais { font-size: .8rem; color: var(--tinta-fraca); } .pd-fatos { font-size: .78rem; color: var(--tinta-clara); } .pd-selo { align-self: flex-start; margin-top: 3px; font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: var(--linha); color: var(--tinta-fraca); } .pd-selo.seu { background: rgba(123, 79, 176, .12); color: var(--acento); } .pd-cta { flex: none; font-size: .82rem; font-weight: 600; color: var(--acento); } .pd-card.em-producao .pd-cta { color: var(--tinta-clara); } /* ==================================================================== 8. HOME B — o card ==================================================================== O card foi reescrito na rodada de ajustes visuais, e a folha dele voltou a ser `home-b.css`, que é onde a Home B mora. O que sobrava aqui eram regras da versão anterior — mantê-las seria deixar duas folhas disputando o mesmo seletor, que é como uma correção passa a depender da ordem dos arquivos. */ /* ==================================================================== 9. VIAGEM, CONTA E NOTIFICAÇÕES (§43, §44, §47, §85) ==================================================================== */ .vg-trilha { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .vg-trilha-bt { width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--linha); border-radius: 14px; background: var(--papel-2); font: inherit; color: var(--tinta); text-align: left; cursor: pointer; } .vg-trilha-bt:disabled { cursor: default; color: var(--tinta-fraca); } .vg-trilha-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .vg-trilha-datas { font-size: .78rem; color: var(--tinta-fraca); } .vg-trilha-n { flex: none; font-size: .74rem; color: var(--tinta-clara); } .btn-sec { background: var(--papel-2); color: var(--tinta); border: 1px solid var(--linha); } .ct-cabeca { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 6px; } .ct-avatar-g { flex: none; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; color: #fff; background: linear-gradient(140deg, var(--acento), #5c3a86); } .ct-cabeca h2 { margin: 0 0 5px; font-size: 1.06rem; } .ct-cabeca p { margin: 0; color: var(--tinta-fraca); font-size: .88rem; line-height: 1.45; } .ct-itens button { align-items: flex-start; } .ct-sub { display: block; font-size: .74rem; color: var(--tinta-clara); font-weight: 400; } .nt-vazio { border: 1px dashed var(--linha); border-radius: var(--raio); padding: 34px 20px; text-align: center; color: var(--tinta-fraca); } .nt-ic { font-size: 26px; color: var(--tinta-clara); display: block; margin-bottom: 10px; } .nt-vazio p { margin: 0 0 6px; } /* ==================================================================== 10. AJUDA — a porta de volta do tutorial (§6) ==================================================================== */ .inst-cta { width: 100%; display: flex; align-items: center; gap: 11px; margin: 0 0 16px; padding: 13px 14px; border: 1px solid var(--linha); border-radius: 14px; background: var(--papel-2); font: inherit; color: var(--tinta); text-align: left; cursor: pointer; } .inst-cta span { min-width: 0; } .inst-cta > span:nth-child(2) { flex: 1 1 auto; font-weight: 600; } .inst-cta small { display: block; font-weight: 400; font-size: .76rem; color: var(--tinta-clara); } .inst-cta-ic { flex: none; color: var(--acento); font-size: 1.05rem; } /* ==================================================================== 11. AVALIE O GUI — o assunto virou select (§55, §56) ==================================================================== */ .av-select { width: 100%; padding: 12px 13px; border-radius: 12px; border: 1px solid var(--linha); background: var(--papel-2); font: inherit; color: var(--tinta); } .av-assunto, .av-livre { display: block; margin-bottom: 12px; } /* ==================================================================== 12. DESKTOP — nem mobile esticado, nem layout novo (§110) ==================================================================== */ @media (min-width: 860px) { .pd-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tg { align-items: center; } .tg-caixa { border-radius: 22px; } } /* O contador do antigo botão de planejamento vive escondido: `pintarConta` continua alimentando-o porque os testes gravados da 12.13 o leem, e apagar o nó quebraria a leitura sem melhorar nada na tela (§45). */ #conta-plano { display: none !important; } /* O cabeçalho do mapa é "curto de propósito" (12.6B-H): o par sino + avatar entra sem crescer a faixa. */ .topo .shell-acoes { align-self: center; } /* ==================================================================== O CTA DE INGRESSO — contextual à atividade (§11 a §19) ==================================================================== Ele fica entre o Calendário e «Obter direção», e se parece com «Obter direção» de propósito: os dois são coisas a resolver antes de ir, e dar a um deles o peso do botão primário sugeriria que comprar ingresso é mais importante do que chegar lá. O preenchido continua sendo o Salvar do calendário, que é a única ação que muda a viagem do viajante. `.sem-destino` é o estado de hoje: há ingresso a comprar, e ainda não há por onde. Ele não se disfarça de link — é `