/* ====================================================================
   WLC · Caderno Secreto — Infográficos (extras de turismo)
   36 componentes novos · namespace ix-
   Segue a linguagem visual existente: cards cremes 20px, sombras
   tingidas de Space Cadet, numerais Chaloopswoo, paleta de marca.
   ==================================================================== */

/* ── BASE COMPARTILHADA ──────────────────────────────────── */
.ix-card {
  background: var(--wlc-white); border-radius: var(--radius-card);
  padding: 18px 20px; box-shadow: var(--shadow-sm);
  border: 1px solid var(--wlc-border-warm);
}
.ix-card--navy { background: var(--wlc-space-cadet); border-color: transparent; box-shadow: var(--shadow-md); }
.ix-card--cream { background: var(--wlc-cream); }
.ix-title {
  font: 700 11px/1 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg3); margin-bottom: 14px; display: flex; align-items: center; gap: 7px;
}
.ix-card--navy .ix-title { color: rgba(245,239,232,0.42); }
.ix-title__ic { width: 14px; height: 14px; color: var(--wlc-imperial-red); display: inline-flex; flex-shrink: 0; }
.ix-title__ic svg { width: 100%; height: 100%; }
.ix-num { font-family: var(--font-numeral); line-height: 1; color: var(--wlc-space-cadet); }
.ix-sub { font: normal 12px/1.45 var(--font-sans); color: var(--fg2); }
.ix-card--navy .ix-sub { color: rgba(245,239,232,0.55); }

/* ════════ A · BAGAGEM & PREPARAÇÃO ════════ */

/* 1 — Mala (anel de progresso) */
.ix-pack { width: 240px; display: flex; gap: 16px; align-items: center; }
.ix-pack__ring { position: relative; width: 84px; height: 84px; flex-shrink: 0; }
.ix-pack__ring svg { transform: rotate(-90deg); }
.ix-pack__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.ix-pack__big { font-family: var(--font-numeral); font-size: 22px; line-height: 1; color: var(--wlc-space-cadet); }
.ix-pack__cap { font: 700 8px/1 var(--font-sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg3); }
.ix-pack__list { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ix-pack__item { display: flex; align-items: center; gap: 7px; font: 500 12px/1.1 var(--font-sans); color: var(--fg1); }
.ix-pack__item--off { color: var(--fg3); }
.ix-check { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.ix-check--on { background: var(--wlc-skobeloff); }
.ix-check--off { border: 1.5px solid var(--wlc-border-warm); }
.ix-check svg { width: 9px; height: 9px; stroke: white; stroke-width: 3; fill: none; }

/* 2 — Peso da bagagem */
.ix-weight { width: 248px; }
.ix-weight__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.ix-weight__val { font-family: var(--font-numeral); font-size: 38px; line-height: 1; color: var(--wlc-skobeloff); }
.ix-weight__limit { font: 700 11px/1 var(--font-sans); color: var(--fg3); text-transform: uppercase; letter-spacing: 0.08em; }
.ix-weight__track { height: 12px; border-radius: 99px; background: var(--wlc-border-warm); position: relative; overflow: hidden; }
.ix-weight__fill { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: var(--wlc-skobeloff); }
.ix-weight__marker { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--wlc-imperial-red); }
.ix-weight__scale { display: flex; justify-content: space-between; margin-top: 7px; font: 600 9px/1 var(--font-sans); color: var(--fg3); }

/* 3 — Documentos */
.ix-docs { width: 244px; }
.ix-docs__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(245,239,232,0.12); }
.ix-docs__row:last-child { border-bottom: none; }
.ix-docs__name { font: 600 13px/1.1 var(--font-sans); color: var(--wlc-alabaster); }
.ix-pill { font: 700 9px/1 var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 9px; border-radius: 99px; white-space: nowrap; }
.ix-pill--ok   { background: rgba(2,112,113,0.22); color: var(--wlc-powder-blue); }
.ix-pill--na   { background: rgba(245,239,232,0.12); color: rgba(245,239,232,0.5); }
.ix-pill--warn { background: rgba(252,180,21,0.2); color: var(--wlc-chinese-yellow); }

/* 4 — Tomada / voltagem */
.ix-plug { width: 196px; text-align: center; }
.ix-plug__icon { margin: 4px auto 12px; width: 56px; height: 56px; color: var(--wlc-space-cadet); }
.ix-plug__icon svg { width: 100%; height: 100%; }
.ix-plug__v { font-family: var(--font-numeral); font-size: 44px; line-height: 1; color: var(--wlc-imperial-red); }
.ix-plug__hz { font: 700 13px/1 var(--font-sans); color: var(--fg2); margin-top: 4px; }
.ix-plug__type { margin-top: 12px; display: inline-block; font: 700 11px/1 var(--font-sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--wlc-space-cadet); background: var(--wlc-powder-blue); padding: 6px 12px; border-radius: 99px; }

/* 5 — Como se vestir (camadas) */
.ix-layers { width: 230px; }
.ix-layers__row { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.ix-layers__num { width: 22px; height: 22px; border-radius: 50%; background: var(--wlc-space-cadet); color: white; font: 700 11px/1 var(--font-numeral); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ix-layers__txt { font: 500 13px/1.2 var(--font-sans); color: var(--fg1); }
.ix-layers__txt small { display: block; font: 400 11px/1.2 var(--font-sans); color: var(--fg3); margin-top: 2px; }
.ix-layers__bar { flex: 1; height: 5px; border-radius: 99px; }

/* 6 — Seguro viagem */
.ix-ins { width: 232px; }
.ix-ins__head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px; }
.ix-ins__big { font-family: var(--font-numeral); font-size: 30px; color: var(--wlc-chinese-yellow); }
.ix-ins__unit { font: 700 12px/1 var(--font-sans); color: rgba(245,239,232,0.55); }
.ix-ins__list { display: flex; flex-direction: column; gap: 9px; }
.ix-ins__item { display: flex; align-items: center; justify-content: space-between; font: 500 12px/1 var(--font-sans); color: var(--wlc-alabaster); }
.ix-ins__cov { font: 700 12px/1 var(--font-sans); color: var(--wlc-powder-blue); }

/* ════════ B · ORÇAMENTO & DINHEIRO ════════ */

/* 7 — Orçamento (barra empilhada) */
.ix-stack { width: 280px; }
.ix-stack__total { font-family: var(--font-numeral); font-size: 30px; color: var(--wlc-space-cadet); margin-bottom: 12px; }
.ix-stack__total small { font: 600 12px/1 var(--font-sans); color: var(--fg3); letter-spacing: 0.04em; margin-left: 4px; }
.ix-stack__bar { display: flex; height: 16px; border-radius: 99px; overflow: hidden; }
.ix-stack__seg { height: 100%; }
.ix-stack__legend { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin-top: 14px; }
.ix-stack__leg { display: flex; align-items: center; gap: 7px; font: 500 11px/1 var(--font-sans); color: var(--fg2); }
.ix-stack__dot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.ix-stack__leg b { margin-left: auto; color: var(--fg1); font-weight: 700; }

/* 8 — Gasto diário (colunas) */
.ix-daily { width: 260px; }
.ix-daily__chart { display: flex; align-items: flex-end; gap: 10px; height: 96px; position: relative; padding-top: 6px; border-bottom: 1.5px solid var(--wlc-border-warm); }
.ix-daily__limit { position: absolute; left: 0; right: 0; border-top: 1.5px dashed var(--wlc-imperial-red); }
.ix-daily__limit span { position: absolute; right: 0; top: -14px; font: 700 9px/1 var(--font-sans); color: var(--wlc-imperial-red); background: var(--wlc-white); padding: 0 3px; }
.ix-daily__col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.ix-daily__fill { width: 100%; border-radius: 5px 5px 0 0; background: var(--wlc-green-blue); }
.ix-daily__fill--over { background: var(--wlc-imperial-red); }
.ix-daily__labels { display: flex; gap: 10px; margin-top: 7px; }
.ix-daily__labels span { flex: 1; text-align: center; font: 600 10px/1 var(--font-sans); color: var(--fg3); }

/* 9 — Quanto custa */
.ix-prices { width: 252px; }
.ix-prices__row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--wlc-border-warm); }
.ix-prices__row:last-child { border-bottom: none; }
.ix-prices__name { font: 500 13px/1.1 var(--font-sans); color: var(--fg1); flex: 1; }
.ix-prices__val { font: 700 13px/1 var(--font-numeral); color: var(--wlc-space-cadet); }
.ix-prices__clp { font: 500 10px/1 var(--font-sans); color: var(--fg3); margin-left: 6px; }

/* 10 — Nível de preço ($$$) */
.ix-tier { width: 200px; text-align: center; }
.ix-tier__dots { display: flex; gap: 6px; justify-content: center; margin: 6px 0 12px; }
.ix-tier__d { font-family: var(--font-numeral); font-size: 30px; line-height: 1; color: var(--wlc-border-warm); }
.ix-tier__d--on { color: var(--wlc-chinese-yellow); }
.ix-tier__label { font: 700 13px/1.2 var(--font-sans); color: var(--wlc-space-cadet); }
.ix-tier__desc { font: 400 11px/1.4 var(--font-sans); color: var(--fg3); margin-top: 4px; }

/* 11 — Meta de economia */
.ix-goal { width: 236px; }
.ix-goal__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; }
.ix-goal__cur { font-family: var(--font-numeral); font-size: 28px; color: var(--wlc-imperial-red); }
.ix-goal__tgt { font: 600 12px/1 var(--font-sans); color: var(--fg3); }
.ix-goal__track { height: 14px; border-radius: 99px; background: var(--wlc-border-warm); overflow: hidden; margin-top: 10px; }
.ix-goal__fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--wlc-terra-cotta), var(--wlc-imperial-red)); display: flex; align-items: center; justify-content: flex-end; }
.ix-goal__pct { font: 700 9px/1 var(--font-sans); color: white; padding-right: 7px; }
.ix-goal__foot { display: flex; justify-content: space-between; margin-top: 8px; font: 500 11px/1 var(--font-sans); color: var(--fg2); }

/* 12 — Orçamento usado (gauge) */
.ix-bgauge { width: 200px; text-align: center; }
.ix-bgauge svg { display: block; margin: 0 auto; }
.ix-bgauge__pct { font-family: var(--font-numeral); font-size: 26px; color: var(--wlc-space-cadet); margin-top: -6px; }
.ix-bgauge__lbl { font: 500 11px/1.3 var(--font-sans); color: var(--fg2); margin-top: 2px; }

/* ════════ C · AVALIAÇÕES & RANKINGS ════════ */

/* 13 — Avaliação de hotel */
.ix-stars { width: 260px; }
.ix-stars__head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.ix-stars__score { font-family: var(--font-numeral); font-size: 44px; line-height: 1; color: var(--wlc-space-cadet); }
.ix-stars__row svg { width: 16px; height: 16px; }
.ix-stars__count { font: 500 11px/1 var(--font-sans); color: var(--fg3); margin-top: 5px; }
.ix-stars__bars { display: flex; flex-direction: column; gap: 8px; }
.ix-stars__b { display: grid; grid-template-columns: 78px 1fr 28px; align-items: center; gap: 8px; }
.ix-stars__b-lbl { font: 500 11px/1 var(--font-sans); color: var(--fg2); }
.ix-stars__b-track { height: 6px; border-radius: 99px; background: var(--wlc-border-warm); overflow: hidden; }
.ix-stars__b-fill { height: 100%; border-radius: 99px; background: var(--wlc-chinese-yellow); }
.ix-stars__b-val { font: 700 11px/1 var(--font-numeral); color: var(--wlc-space-cadet); text-align: right; }

/* 14 — Top 5 lugares */
.ix-top { width: 256px; }
.ix-top__row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--wlc-border-warm); }
.ix-top__row:last-child { border-bottom: none; }
.ix-top__rank { font-family: var(--font-numeral); font-size: 22px; line-height: 1; color: var(--wlc-border-warm); width: 26px; text-align: center; }
.ix-top__row--1 .ix-top__rank { color: var(--wlc-imperial-red); }
.ix-top__row--2 .ix-top__rank { color: var(--wlc-chinese-yellow); }
.ix-top__row--3 .ix-top__rank { color: var(--wlc-skobeloff); }
.ix-top__name { font: 600 13px/1.1 var(--font-sans); color: var(--fg1); flex: 1; }
.ix-top__meta { font: 500 11px/1 var(--font-sans); color: var(--fg3); }

/* 15 — Dificuldade da trilha */
.ix-diff { width: 240px; }
.ix-diff__segs { display: flex; gap: 5px; margin-bottom: 6px; }
.ix-diff__seg { flex: 1; height: 9px; border-radius: 99px; background: var(--wlc-border-warm); }
.ix-diff__seg--on { background: var(--wlc-terra-cotta); }
.ix-diff__lbl { font: 700 14px/1 var(--font-sans); color: var(--wlc-space-cadet); margin-bottom: 12px; }
.ix-diff__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; padding-top: 12px; border-top: 1px solid var(--wlc-border-warm); }
.ix-diff__stat-n { font: 700 15px/1 var(--font-numeral); color: var(--wlc-space-cadet); }
.ix-diff__stat-l { font: 600 9px/1.2 var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg3); margin-top: 3px; }

/* 16 — Nota da viagem (score circular) */
.ix-score { width: 200px; text-align: center; }
.ix-score__wrap { position: relative; width: 120px; height: 120px; margin: 2px auto 10px; }
.ix-score__wrap svg { transform: rotate(-90deg); }
.ix-score__c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ix-score__n { font-family: var(--font-numeral); font-size: 38px; line-height: 1; color: var(--wlc-space-cadet); }
.ix-score__n small { font-size: 16px; color: var(--fg3); }
.ix-score__tag { font: 700 12px/1 var(--font-sans); color: var(--wlc-skobeloff); text-transform: uppercase; letter-spacing: 0.1em; }

/* 17 — Vale a pena? (prós/contras) */
.ix-pc { width: 280px; }
.ix-pc__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ix-pc__h { font: 700 10px/1 var(--font-sans); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px; }
.ix-pc__h--pro { color: var(--wlc-skobeloff); }
.ix-pc__h--con { color: var(--wlc-imperial-red); }
.ix-pc__li { display: flex; gap: 6px; font: 500 12px/1.3 var(--font-sans); color: var(--fg1); padding: 4px 0; }
.ix-pc__li svg { width: 12px; height: 12px; flex-shrink: 0; margin-top: 2px; }

/* 18 — Comparativo de transporte */
.ix-vs { width: 280px; }
.ix-vs__head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin-bottom: 12px; }
.ix-vs__side { font: 700 14px/1.1 var(--font-sans); color: var(--wlc-space-cadet); text-align: center; }
.ix-vs__or { font: 700 9px/1 var(--font-sans); color: var(--fg3); background: var(--wlc-border-warm); padding: 4px 7px; border-radius: 99px; }
.ix-vs__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--wlc-border-warm); }
.ix-vs__cell { font: 600 13px/1 var(--font-numeral); color: var(--fg2); text-align: center; }
.ix-vs__cell--win { color: var(--wlc-imperial-red); }
.ix-vs__metric { font: 600 9px/1 var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg3); text-align: center; }

/* ════════ D · SAZONALIDADE & QUANDO IR ════════ */

/* 19 — Melhor época (heatmap 12 meses) */
.ix-heat { width: 280px; }
.ix-heat__grid { display: grid; grid-template-columns: repeat(12,1fr); gap: 4px; }
.ix-heat__cell { aspect-ratio: 1; border-radius: 4px; display: flex; align-items: center; justify-content: center; font: 700 8px/1 var(--font-sans); color: var(--fg2); }
.ix-heat__legend { display: flex; align-items: center; gap: 6px; margin-top: 12px; font: 500 10px/1 var(--font-sans); color: var(--fg3); }
.ix-heat__scale { display: flex; gap: 3px; }
.ix-heat__sw { width: 14px; height: 8px; border-radius: 2px; }

/* 20 — Lotação por mês */
.ix-crowd { width: 280px; }
.ix-crowd__chart { display: flex; align-items: flex-end; gap: 5px; height: 70px; }
.ix-crowd__col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.ix-crowd__bar { width: 100%; border-radius: 3px 3px 0 0; background: var(--wlc-powder-blue); }
.ix-crowd__bar--peak { background: var(--wlc-imperial-red); }
.ix-crowd__bar--low { background: var(--wlc-skobeloff); }
.ix-crowd__labels { display: flex; gap: 5px; margin-top: 6px; }
.ix-crowd__labels span { flex: 1; text-align: center; font: 600 7px/1 var(--font-sans); color: var(--fg3); text-transform: uppercase; }

/* 21 — Estações (roda) */
.ix-seasons { width: 232px; }
.ix-seasons__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ix-seasons__cell { border-radius: 12px; padding: 11px 12px; border: 1px solid var(--wlc-border-warm); }
.ix-seasons__cell--now { border-color: transparent; }
.ix-seasons__name { font: 700 12px/1 var(--font-sans); }
.ix-seasons__mo { font: 500 10px/1.2 var(--font-sans); margin-top: 3px; opacity: 0.7; }
.ix-seasons__tmp { font: 700 13px/1 var(--font-numeral); margin-top: 6px; }
.ix-seasons__note { font: 500 10px/1.3 var(--font-sans); color: var(--fg3); margin-top: 10px; text-align: center; }

/* 22 — Temperatura no ano (linha) */
.ix-tyear { width: 280px; }
.ix-tyear__chart { position: relative; }
.ix-tyear__labels { display: flex; justify-content: space-between; margin-top: 6px; font: 600 8px/1 var(--font-sans); color: var(--fg3); text-transform: uppercase; }
.ix-tyear__key { display: flex; gap: 14px; margin-top: 10px; }
.ix-tyear__k { display: flex; align-items: center; gap: 6px; font: 500 11px/1 var(--font-sans); color: var(--fg2); }
.ix-tyear__line { width: 16px; height: 3px; border-radius: 99px; }

/* 23 — Chuva por mês */
.ix-rain { width: 268px; }
.ix-rain__chart { display: flex; align-items: flex-end; gap: 5px; height: 64px; }
.ix-rain__col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.ix-rain__bar { width: 8px; border-radius: 99px; background: var(--wlc-green-blue); opacity: 0.85; }
.ix-rain__labels { display: flex; gap: 5px; margin-top: 6px; }
.ix-rain__labels span { flex: 1; text-align: center; font: 600 7px/1 var(--font-sans); color: var(--fg3); text-transform: uppercase; }

/* 24 — Horas de luz (área) */
.ix-light { width: 268px; }
.ix-light__row { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; }
.ix-light__big { font-family: var(--font-numeral); font-size: 24px; color: var(--wlc-chinese-yellow); }
.ix-light__lbl { font: 500 11px/1.3 var(--font-sans); color: var(--fg2); }

/* ════════ E · ROTEIRO & LOGÍSTICA ════════ */

/* 25 — Roteiro do dia */
.ix-day { width: 256px; }
.ix-day__row { display: grid; grid-template-columns: 46px 1fr; gap: 12px; position: relative; padding-bottom: 14px; }
.ix-day__row:last-child { padding-bottom: 0; }
.ix-day__time { font: 700 12px/1 var(--font-numeral); color: var(--wlc-imperial-red); text-align: right; padding-top: 1px; }
.ix-day__line { position: absolute; left: 53px; top: 4px; bottom: -4px; width: 1.5px; background: var(--wlc-border-warm); }
.ix-day__row:last-child .ix-day__line { display: none; }
.ix-day__dot { position: absolute; left: 49px; top: 3px; width: 9px; height: 9px; border-radius: 50%; background: var(--wlc-space-cadet); border: 2px solid var(--wlc-white); z-index: 1; }
.ix-day__body { padding-left: 8px; }
.ix-day__ev { font: 600 13px/1.2 var(--font-sans); color: var(--fg1); }
.ix-day__de { font: 400 11px/1.3 var(--font-sans); color: var(--fg3); margin-top: 2px; }

/* 26 — Matriz de transporte */
.ix-matrix { width: 280px; }
.ix-matrix__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 0; }
.ix-matrix__hc { font: 700 8px/1.1 var(--font-sans); letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg3); text-align: center; padding: 0 0 9px; }
.ix-matrix__hc--l { text-align: left; }
.ix-matrix__mode { font: 600 12px/1 var(--font-sans); color: var(--fg1); display: flex; align-items: center; gap: 7px; padding: 9px 0; border-top: 1px solid var(--wlc-border-warm); }
.ix-matrix__cell { font: 600 12px/1 var(--font-numeral); color: var(--fg2); text-align: center; padding: 9px 0; border-top: 1px solid var(--wlc-border-warm); }
.ix-matrix__dots { color: var(--wlc-chinese-yellow); letter-spacing: 1px; }

/* 27 — Rota com paradas */
.ix-route { width: 280px; }
.ix-route__line { display: flex; align-items: center; }
.ix-route__stop { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; }
.ix-route__node { width: 28px; height: 28px; border-radius: 50%; background: var(--wlc-space-cadet); color: white; font: 700 12px/1 var(--font-numeral); display: flex; align-items: center; justify-content: center; }
.ix-route__stop--end .ix-route__node { background: var(--wlc-imperial-red); }
.ix-route__name { font: 600 9px/1 var(--font-sans); color: var(--fg1); white-space: nowrap; }
.ix-route__seg { flex: 1; height: 2px; background: repeating-linear-gradient(90deg, var(--wlc-border-warm) 0 5px, transparent 5px 9px); margin: 0 2px; position: relative; top: -9px; }
.ix-route__seg span { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font: 600 8px/1 var(--font-sans); color: var(--fg3); white-space: nowrap; }

/* 28 — Distâncias entre cidades */
.ix-dist { width: 256px; }
.ix-dist__row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--wlc-border-warm); }
.ix-dist__row:last-child { border-bottom: none; }
.ix-dist__pair { font: 600 12px/1.2 var(--font-sans); color: var(--fg1); flex: 1; }
.ix-dist__pair small { color: var(--fg3); font-weight: 500; }
.ix-dist__km { font: 700 14px/1 var(--font-numeral); color: var(--wlc-space-cadet); }
.ix-dist__km span { font: 500 10px/1 var(--font-sans); color: var(--fg3); margin-left: 2px; }

/* 29 — Anéis de atividade (passos) */
.ix-rings { width: 230px; display: flex; align-items: center; gap: 16px; }
.ix-rings__svg { width: 96px; height: 96px; flex-shrink: 0; }
.ix-rings__svg svg { transform: rotate(-90deg); }
.ix-rings__legend { display: flex; flex-direction: column; gap: 9px; }
.ix-rings__li { display: flex; align-items: center; gap: 8px; }
.ix-rings__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ix-rings__v { font: 700 14px/1 var(--font-numeral); color: var(--wlc-space-cadet); }
.ix-rings__l { font: 500 10px/1 var(--font-sans); color: var(--fg3); text-transform: uppercase; letter-spacing: 0.04em; }

/* 30 — Melhor horário (por hora) */
.ix-hours { width: 268px; }
.ix-hours__chart { display: flex; align-items: flex-end; gap: 4px; height: 64px; }
.ix-hours__col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; position: relative; }
.ix-hours__bar { width: 100%; border-radius: 3px 3px 0 0; background: var(--wlc-border-warm); }
.ix-hours__bar--best { background: var(--wlc-skobeloff); }
.ix-hours__tip { display: flex; align-items: center; gap: 7px; margin-top: 12px; font: 500 12px/1.3 var(--font-sans); color: var(--fg2); }
.ix-hours__tip b { color: var(--wlc-skobeloff); }
.ix-hours__labels { display: flex; gap: 4px; margin-top: 6px; }
.ix-hours__labels span { flex: 1; text-align: center; font: 600 7px/1 var(--font-sans); color: var(--fg3); }

/* ════════ F · CULTURA & DICAS LOCAIS ════════ */

/* 31 — Gorjeta */
.ix-tip2 { width: 220px; }
.ix-tip2__big { font-family: var(--font-numeral); font-size: 48px; line-height: 1; color: var(--wlc-imperial-red); text-align: center; margin: 2px 0 12px; }
.ix-tip2__row { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--wlc-border-warm); font: 500 12px/1 var(--font-sans); color: var(--fg1); }
.ix-tip2__row:last-child { border-bottom: none; }
.ix-tip2__pct { font: 700 12px/1 var(--font-numeral); color: var(--wlc-skobeloff); }

/* 32 — Frases úteis */
.ix-phr { width: 256px; }
.ix-phr__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--wlc-border-warm); }
.ix-phr__row:last-child { border-bottom: none; }
.ix-phr__pt { font: 500 12px/1.1 var(--font-sans); color: var(--fg3); }
.ix-phr__es { font: 700 13px/1.1 var(--font-sans); color: var(--wlc-space-cadet); text-align: right; }
.ix-phr__ar { color: var(--wlc-imperial-red); width: 12px; height: 12px; }

/* 33 — Etiqueta (faça / evite) */
.ix-etq { width: 280px; }
.ix-etq__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ix-etq__h { font: 700 10px/1 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 9px; display: flex; align-items: center; gap: 5px; }
.ix-etq__h--do { color: var(--wlc-skobeloff); }
.ix-etq__h--no { color: var(--wlc-imperial-red); }
.ix-etq__li { font: 500 12px/1.35 var(--font-sans); color: var(--fg1); padding: 4px 0; }

/* 34 — Pratos típicos (menu fotográfico) */
.ix-food { width: 300px; }
.ix-food__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ix-food__loc { font: 600 9px/1 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg3); }
.ix-food__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ix-food__cell { background: var(--wlc-white); border: 1px solid var(--wlc-border-warm); border-radius: 13px; overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow 0.18s, transform 0.18s; }
.ix-food__cell:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.ix-food__photo { position: relative; line-height: 0; }
.ix-food__cat { position: absolute; left: 7px; bottom: 7px; font: 700 8px/1 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: #fff; padding: 4px 8px; border-radius: 99px; box-shadow: 0 2px 6px rgba(36,34,88,0.22); }
.ix-food__body { padding: 9px 11px 11px; }
.ix-food__name { font: 700 12.5px/1.15 var(--font-sans); color: var(--wlc-space-cadet); }
.ix-food__desc { font: 400 10px/1.3 var(--font-sans); color: var(--fg3); margin-top: 3px; }

/* 35 — Telefones de emergência */
.ix-emg { width: 240px; }
.ix-emg__row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(245,239,232,0.12); }
.ix-emg__row:last-child { border-bottom: none; }
.ix-emg__num { font-family: var(--font-numeral); font-size: 22px; line-height: 1; color: var(--wlc-chinese-yellow); width: 48px; }
.ix-emg__name { font: 600 12px/1.2 var(--font-sans); color: var(--wlc-alabaster); }
.ix-emg__name small { display: block; font: 400 10px/1.2 var(--font-sans); color: rgba(245,239,232,0.5); margin-top: 1px; }

/* 36 — Mal de altitude */
.ix-alt { width: 256px; }
.ix-alt__scale { display: flex; height: 8px; border-radius: 99px; overflow: hidden; margin-bottom: 4px; }
.ix-alt__scale i { flex: 1; }
.ix-alt__marks { display: flex; justify-content: space-between; font: 600 8px/1 var(--font-sans); color: var(--fg3); margin-bottom: 14px; }
.ix-alt__li { display: flex; gap: 8px; align-items: flex-start; padding: 5px 0; font: 500 12px/1.35 var(--font-sans); color: var(--fg1); }
.ix-alt__li svg { width: 13px; height: 13px; flex-shrink: 0; margin-top: 1px; color: var(--wlc-skobeloff); }