/* ====================================================================
   WLC · Caderno Secreto — Extras v2
   • +10 Roteiro & Logística
   • Nova categoria: Tabelas de comparação (7 modelos)
   • Sistema de cor (tints) para deixar os cards mais coloridos
   ==================================================================== */

/* ── TINTS · fundos coloridos suaves para os cards ix- ── */
.ix-card--y { background: #FCF1D8; border-color: #F4E0AE; }
.ix-card--b { background: #E4EFFA; border-color: #C8DDF1; }
.ix-card--t { background: #E1F2F1; border-color: #C4E6E4; }
.ix-card--r { background: #FBE6E1; border-color: #F4D0C8; }
.ix-card--g { background: #E0F0E8; border-color: #C5E2D4; }
.ix-card--p { background: #F0E5F0; border-color: #E0CEE0; }
/* títulos ganham a cor do tema do card */
.ix-card--y .ix-title { color: #9C7415; }
.ix-card--b .ix-title { color: #1E5896; }
.ix-card--t .ix-title { color: #06736F; }
.ix-card--r .ix-title { color: #C0463C; }
.ix-card--g .ix-title { color: #1F7A55; }
.ix-card--p .ix-title { color: #7C287B; }
.ix-card--y .ix-title__ic { color: #C9920F; }
.ix-card--b .ix-title__ic { color: var(--wlc-green-blue); }
.ix-card--t .ix-title__ic { color: var(--wlc-skobeloff); }
.ix-card--r .ix-title__ic { color: var(--wlc-imperial-red); }
.ix-card--g .ix-title__ic { color: var(--wlc-skobeloff); }
.ix-card--p .ix-title__ic { color: var(--wlc-midnight); }

/* ════════ ROTEIRO & LOGÍSTICA · extras (L1–L10) ════════ */

/* L1 — Roteiro de 3 dias */
.ix-trip { width: 286px; }
.ix-trip__day { display: grid; grid-template-columns: 46px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--wlc-border-warm); }
.ix-trip__day:first-of-type { border-top: none; padding-top: 0; }
.ix-trip__badge { background: var(--wlc-space-cadet); color: #fff; border-radius: 10px; text-align: center; padding: 7px 0; }
.ix-trip__d { font: 700 8px/1 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--wlc-chinese-yellow); }
.ix-trip__dn { font: 700 17px/1 var(--font-numeral); margin-top: 3px; }
.ix-trip__city { font: 700 13px/1.1 var(--font-sans); color: var(--fg1); margin-bottom: 7px; }
.ix-trip__chips { display: flex; flex-wrap: wrap; gap: 5px; }
.ix-trip__chip { font: 600 10px/1 var(--font-sans); color: var(--fg2); background: var(--wlc-white); border: 1px solid var(--wlc-border-warm); padding: 4px 9px; border-radius: 99px; }

/* L2 — Embarque passo a passo */
.ix-step { width: 286px; }
.ix-step__track { display: flex; align-items: flex-start; }
.ix-step__s { display: flex; flex-direction: column; align-items: center; gap: 7px; width: 50px; flex-shrink: 0; }
.ix-step__node { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 700 12px/1 var(--font-numeral); }
.ix-step__node--done { background: var(--wlc-skobeloff); color: #fff; }
.ix-step__node--now { background: var(--wlc-imperial-red); color: #fff; box-shadow: 0 0 0 4px rgba(231,64,65,0.18); }
.ix-step__node--todo { background: var(--wlc-white); border: 1.5px solid var(--wlc-border-warm); color: var(--fg3); }
.ix-step__node svg { width: 13px; height: 13px; stroke: #fff; stroke-width: 3; fill: none; }
.ix-step__lbl { font: 600 8.5px/1.2 var(--font-sans); color: var(--fg2); text-align: center; }
.ix-step__line { flex: 1; height: 2.5px; border-radius: 99px; background: var(--wlc-border-warm); margin-top: 13px; }
.ix-step__line--done { background: var(--wlc-skobeloff); }

/* L3 — Voo com conexão */
.ix-conn { width: 252px; }
.ix-conn__row { display: grid; grid-template-columns: 48px 16px 1fr; gap: 9px; }
.ix-conn__time { font: 700 13px/1 var(--font-numeral); color: var(--fg1); text-align: right; padding-top: 1px; }
.ix-conn__rail { display: flex; flex-direction: column; align-items: center; }
.ix-conn__dot { width: 11px; height: 11px; border-radius: 50%; border: 2.5px solid var(--wlc-space-cadet); background: #fff; flex-shrink: 0; }
.ix-conn__dot--mid { border-color: var(--wlc-chinese-yellow); }
.ix-conn__seg { width: 2px; flex: 1; min-height: 30px; background: var(--wlc-border-warm); margin: 2px 0; }
.ix-conn__seg--dash { background: repeating-linear-gradient(var(--wlc-border-warm) 0 4px, transparent 4px 8px); }
.ix-conn__iata { font: 700 13px/1 var(--font-sans); color: var(--wlc-space-cadet); }
.ix-conn__sub { font: 400 11px/1.3 var(--font-sans); color: var(--fg3); margin-top: 1px; }
.ix-conn__lay { font: 700 10px/1 var(--font-sans); color: #9C7415; background: rgba(252,180,21,0.22); padding: 4px 8px; border-radius: 99px; display: inline-block; }

/* L4 — Linhas de metrô */
.ix-metro { width: 268px; }
.ix-metro__row { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-bottom: 1px solid var(--wlc-border-warm); }
.ix-metro__row:last-child { border-bottom: none; }
.ix-metro__badge { width: 32px; height: 22px; border-radius: 6px; color: #fff; font: 700 11px/1 var(--font-numeral); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ix-metro__route { font: 600 12px/1.2 var(--font-sans); color: var(--fg1); flex: 1; }
.ix-metro__route small { display: block; font: 400 10px/1 var(--font-sans); color: var(--fg3); margin-top: 2px; }
.ix-metro__n { font: 700 13px/1 var(--font-numeral); color: var(--wlc-space-cadet); text-align: right; }
.ix-metro__n span { display: block; font: 600 8px/1 var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg3); margin-top: 2px; }

/* L5 — Status do voo */
.ix-fstat { width: 256px; }
.ix-fstat__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.ix-fstat__flight { font: 700 19px/1 var(--font-sans); color: #fff; }
.ix-fstat__flight small { font: 500 11px/1 var(--font-sans); color: rgba(245,239,232,0.5); margin-left: 6px; }
.ix-fstat__ontime { font: 700 9px/1 var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: #bfe9c8; background: rgba(2,112,113,0.4); padding: 5px 10px; border-radius: 99px; }
.ix-fstat__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.ix-fstat__lbl { font: 700 8px/1 var(--font-sans); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(245,239,232,0.42); }
.ix-fstat__val { font: 700 17px/1 var(--font-numeral); color: var(--wlc-chinese-yellow); margin-top: 5px; }

/* L6 — Aluguel de carro */
.ix-rent { width: 258px; }
.ix-rent__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 13px; }
.ix-rent__class { font: 700 14px/1.15 var(--font-sans); color: var(--fg1); }
.ix-rent__class small { display: block; font: 400 11px/1.2 var(--font-sans); color: var(--fg3); margin-top: 3px; }
.ix-rent__price { text-align: right; flex-shrink: 0; }
.ix-rent__price b { font: 700 23px/1 var(--font-numeral); color: var(--wlc-imperial-red); }
.ix-rent__price span { display: block; font: 600 8px/1 var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg3); margin-top: 3px; }
.ix-rent__feats { display: flex; flex-wrap: wrap; gap: 8px 12px; padding-top: 13px; border-top: 1px solid var(--wlc-border-warm); }
.ix-rent__feat { display: flex; align-items: center; gap: 5px; font: 600 11px/1 var(--font-sans); color: var(--fg2); }
.ix-rent__feat svg { width: 12px; height: 12px; color: var(--wlc-skobeloff); flex-shrink: 0; }

/* L7 — Horário de funcionamento */
.ix-open { width: 248px; }
.ix-open__now { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ix-open__now-lbl { font: 600 11px/1.2 var(--font-sans); color: var(--fg2); }
.ix-open__pill { font: 700 9px/1 var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: var(--wlc-skobeloff); padding: 5px 10px; border-radius: 99px; }
.ix-open__row { display: flex; justify-content: space-between; padding: 6px 0; font: 500 12px/1 var(--font-sans); color: var(--fg2); }
.ix-open__row--today { color: var(--fg1); font-weight: 700; }
.ix-open__row--today .ix-open__hrs { color: var(--wlc-imperial-red); }
.ix-open__closed { color: var(--fg3); }

/* L8 — Bagagem permitida */
.ix-bag { width: 270px; }
.ix-bag__cols { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 16px; align-items: stretch; }
.ix-bag__div { background: var(--wlc-border-warm); }
.ix-bag__col { text-align: center; }
.ix-bag__ic { width: 38px; height: 38px; margin: 2px auto 9px; color: var(--wlc-space-cadet); }
.ix-bag__ic svg { width: 100%; height: 100%; }
.ix-bag__h { font: 700 11px/1 var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg2); }
.ix-bag__kg { font: 700 22px/1 var(--font-numeral); color: var(--wlc-imperial-red); margin: 8px 0 3px; }
.ix-bag__dim { font: 400 10px/1.4 var(--font-sans); color: var(--fg3); }

/* L9 — Tempo de deslocamento */
.ix-mov { width: 262px; }
.ix-mov__row { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-bottom: 1px solid var(--wlc-border-warm); }
.ix-mov__row:last-child { border-bottom: none; }
.ix-mov__mode { font: 700 8px/1 var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase; color: #fff; padding: 4px 7px; border-radius: 99px; flex-shrink: 0; width: 50px; text-align: center; }
.ix-mov__path { flex: 1; font: 600 12px/1.25 var(--font-sans); color: var(--fg1); }
.ix-mov__path small { color: var(--fg3); font-weight: 500; }
.ix-mov__t { font: 700 14px/1 var(--font-numeral); color: var(--wlc-space-cadet); }

/* L10 — Passe de transporte (tarjeta bip!) */
.ix-pass { width: 244px; background: linear-gradient(135deg, #1d5aa0, var(--wlc-green-blue)); border-radius: var(--radius-card); padding: 20px 22px; box-shadow: var(--shadow-md); color: #fff; position: relative; overflow: hidden; }
.ix-pass::after { content: ''; position: absolute; right: -30px; top: -30px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,0.08); }
.ix-pass__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; position: relative; }
.ix-pass__brand { font: 800 17px/1 var(--font-sans); letter-spacing: -0.01em; }
.ix-pass__chip { width: 30px; height: 22px; border-radius: 5px; background: linear-gradient(135deg, #f7d774, var(--wlc-chinese-yellow)); }
.ix-pass__lbl { font: 700 8px/1 var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.6); position: relative; }
.ix-pass__saldo { font: 700 30px/1 var(--font-numeral); margin-top: 5px; position: relative; }
.ix-pass__foot { display: flex; justify-content: space-between; margin-top: 16px; font: 500 11px/1 var(--font-sans); color: rgba(255,255,255,0.75); position: relative; }

/* ════════════════════════════════════════════════════════
   TABELAS DE COMPARAÇÃO (7 modelos)
   ════════════════════════════════════════════════════════ */

/* T1 — Comparativo de pacotes (matriz ✓/✗) */
.ix-pkg { width: 330px; }
.ix-pkg__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; }
.ix-pkg__hc { font: 700 9px/1.15 var(--font-sans); letter-spacing: 0.03em; text-transform: uppercase; color: var(--fg3); text-align: center; padding: 0 0 11px; }
.ix-pkg__hc--feat { text-align: left; }
.ix-pkg__hc--hi { color: var(--wlc-imperial-red); }
.ix-pkg__feat { font: 600 11px/1.2 var(--font-sans); color: var(--fg1); padding: 9px 4px 9px 0; border-top: 1px solid var(--wlc-border-warm); display: flex; align-items: center; }
.ix-pkg__cell { display: flex; align-items: center; justify-content: center; padding: 9px 0; border-top: 1px solid var(--wlc-border-warm); }
.ix-pkg__cell--hi { background: rgba(231,64,65,0.06); }
.ix-pkg__hc--hi.ix-pkg__hc { background: rgba(231,64,65,0.06); border-radius: 8px 8px 0 0; padding-top: 7px; }
.ix-pkg__yes svg { width: 15px; height: 15px; color: var(--wlc-skobeloff); }
.ix-pkg__no { width: 11px; height: 2px; border-radius: 2px; background: var(--wlc-border-warm); }
.ix-pkg__txt { font: 700 10px/1 var(--font-sans); color: var(--fg2); }

/* T2 — Planos (pricing cards) */
.ix-plan { width: 322px; }
.ix-plan__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; align-items: stretch; }
.ix-plan__col { border: 1px solid var(--wlc-border-warm); border-radius: 14px; padding: 16px 11px 14px; text-align: center; background: var(--wlc-white); }
.ix-plan__col--pop { border: 1.5px solid var(--wlc-imperial-red); box-shadow: var(--shadow-md); position: relative; }
.ix-plan__pop { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); font: 700 8px/1 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: #fff; background: var(--wlc-imperial-red); padding: 4px 9px; border-radius: 99px; white-space: nowrap; }
.ix-plan__name { font: 700 12px/1 var(--font-sans); color: var(--fg1); }
.ix-plan__price { font: 700 24px/1 var(--font-numeral); color: var(--wlc-space-cadet); margin: 9px 0 2px; }
.ix-plan__col--pop .ix-plan__price { color: var(--wlc-imperial-red); }
.ix-plan__per { font: 500 9px/1 var(--font-sans); color: var(--fg3); }
.ix-plan__list { list-style: none; margin-top: 13px; display: flex; flex-direction: column; gap: 7px; text-align: left; }
.ix-plan__li { font: 500 10px/1.25 var(--font-sans); color: var(--fg2); display: flex; gap: 5px; }
.ix-plan__li svg { width: 10px; height: 10px; color: var(--wlc-skobeloff); flex-shrink: 0; margin-top: 1.5px; }

/* T3 — Head-to-head (Chile vs Argentina) */
.ix-h2h { width: 300px; }
.ix-h2h__head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-bottom: 14px; }
.ix-h2h__flag { font-size: 30px; text-align: center; line-height: 1; }
.ix-h2h__country { font: 700 12px/1.1 var(--font-sans); color: var(--fg1); text-align: center; margin-top: 5px; }
.ix-h2h__vs { font: 700 13px/1 var(--font-numeral); color: #fff; background: var(--wlc-imperial-red); width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.ix-h2h__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--wlc-border-warm); }
.ix-h2h__v { font: 700 13px/1 var(--font-numeral); color: var(--fg1); }
.ix-h2h__v--l { text-align: right; }
.ix-h2h__v--r { text-align: left; }
.ix-h2h__m { font: 600 8px/1 var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg3); text-align: center; white-space: nowrap; }

/* T4 — Scorecard de destinos (heatmap table) */
.ix-sc { width: 322px; }
.ix-sc__grid { display: grid; grid-template-columns: 1.3fr repeat(4,1fr); gap: 4px; }
.ix-sc__hc { font: 700 8px/1.15 var(--font-sans); letter-spacing: 0.02em; text-transform: uppercase; color: var(--fg3); text-align: center; padding-bottom: 5px; display: flex; align-items: flex-end; justify-content: center; }
.ix-sc__hc--l { text-align: left; justify-content: flex-start; }
.ix-sc__name { font: 600 11px/1.1 var(--font-sans); color: var(--fg1); display: flex; align-items: center; }
.ix-sc__cell { height: 30px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font: 700 11px/1 var(--font-numeral); color: #fff; }
.ix-sc__legend { display: flex; align-items: center; gap: 7px; margin-top: 11px; font: 500 9px/1 var(--font-sans); color: var(--fg3); }
.ix-sc__legend i { width: 16px; height: 9px; border-radius: 2px; display: inline-block; }

/* T5 — Preços por temporada (grid) */
.ix-ptbl { width: 314px; }
.ix-ptbl__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; }
.ix-ptbl__hc { font: 700 8px/1.1 var(--font-sans); letter-spacing: 0.03em; text-transform: uppercase; text-align: center; padding: 0 0 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--fg3); }
.ix-ptbl__hc--l { align-items: flex-start; text-align: left; }
.ix-ptbl__dot { width: 8px; height: 8px; border-radius: 50%; }
.ix-ptbl__rh { font: 600 11px/1.2 var(--font-sans); color: var(--fg1); padding: 10px 0; border-top: 1px solid var(--wlc-border-warm); display: flex; align-items: center; }
.ix-ptbl__cell { font: 700 12px/1 var(--font-numeral); color: var(--fg2); text-align: center; padding: 10px 0; border-top: 1px solid var(--wlc-border-warm); display: flex; align-items: center; justify-content: center; }
.ix-ptbl__cell--hi { color: var(--wlc-imperial-red); background: rgba(231,64,65,0.05); }

/* T6 — Companhias aéreas */
.ix-air { width: 322px; }
.ix-air__grid { display: grid; grid-template-columns: 1.4fr 1fr 0.9fr 1.1fr; }
.ix-air__hc { font: 700 8px/1.1 var(--font-sans); letter-spacing: 0.03em; text-transform: uppercase; color: var(--fg3); padding: 0 0 10px; text-align: center; }
.ix-air__hc--l { text-align: left; }
.ix-air__name { font: 700 12px/1.15 var(--font-sans); color: var(--fg1); padding: 11px 0; border-top: 1px solid var(--wlc-border-warm); display: flex; align-items: center; }
.ix-air__cell { font: 700 12px/1 var(--font-numeral); color: var(--fg2); padding: 11px 0; border-top: 1px solid var(--wlc-border-warm); display: flex; align-items: center; justify-content: center; }
.ix-air__bag svg { width: 14px; height: 14px; color: var(--wlc-skobeloff); }
.ix-air__bagno { width: 11px; height: 2px; border-radius: 2px; background: var(--wlc-border-warm); }
.ix-air__stars { display: flex; gap: 1px; color: var(--wlc-chinese-yellow); }
.ix-air__stars svg { width: 11px; height: 11px; }

/* T7 — Ficha de specs (resort vs resort) */
.ix-spec { width: 300px; }
.ix-spec__head { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.ix-spec__col { text-align: center; }
.ix-spec__name { font: 700 13px/1.1 var(--font-sans); color: var(--fg1); }
.ix-spec__tag { display: inline-block; font: 700 8px/1 var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: #fff; padding: 4px 9px; border-radius: 99px; margin-top: 6px; }
.ix-spec__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--wlc-border-warm); }
.ix-spec__v { font: 700 13px/1 var(--font-numeral); color: var(--fg1); }
.ix-spec__v--l { text-align: right; }
.ix-spec__v--r { text-align: left; }
.ix-spec__v--win { color: var(--wlc-imperial-red); }
.ix-spec__m { font: 600 8px/1 var(--font-sans); letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg3); text-align: center; white-space: nowrap; }