/* ====================================================================
   WLC · Caderno Secreto — Infográficos em CORES VIVAS
   30 cards de fundo sólido, alta energia · namespace iv-
   Paleta 100% de marca, numerais Chaloopswoo.
   ==================================================================== */

/* ── BASE VIVA ─────────────────────────────────────────── */
.iv-card {
  position: relative; overflow: hidden;
  border-radius: var(--radius-card, 20px);
  padding: 20px 22px; color: #fff;
  box-shadow: var(--shadow-md);
}
/* fundos sólidos de marca */
.iv-red   { background: var(--wlc-imperial-red); }
.iv-skob  { background: var(--wlc-skobeloff); }
.iv-blue  { background: var(--wlc-green-blue); }
.iv-yellow{ background: var(--wlc-chinese-yellow); color: var(--wlc-space-cadet); }
.iv-terra { background: var(--wlc-terra-cotta); }
.iv-mid   { background: var(--wlc-midnight); }
.iv-navy  { background: var(--wlc-space-cadet); }
.iv-powder{ background: var(--wlc-powder-blue); color: var(--wlc-space-cadet); }
/* gradientes vivos */
.iv-g-sunset { background: linear-gradient(135deg, var(--wlc-imperial-red), var(--wlc-chinese-yellow)); }
.iv-g-sea    { background: linear-gradient(135deg, var(--wlc-green-blue), var(--wlc-skobeloff)); }
.iv-g-dusk   { background: linear-gradient(135deg, var(--wlc-midnight), var(--wlc-green-blue)); }
.iv-g-warm   { background: linear-gradient(135deg, var(--wlc-terra-cotta), var(--wlc-imperial-red)); }

/* bolha decorativa */
.iv-card::after { content:''; position:absolute; right:-34px; top:-34px; width:120px; height:120px; border-radius:50%; background:rgba(255,255,255,0.12); pointer-events:none; }
.iv-yellow::after, .iv-powder::after { background:rgba(36,34,88,0.08); }

.iv-eyebrow { font: 700 10px/1 var(--font-sans); letter-spacing:0.12em; text-transform:uppercase; opacity:0.82; display:flex; align-items:center; gap:7px; position:relative; }
.iv-eyebrow__ic { width:14px; height:14px; display:inline-flex; flex-shrink:0; }
.iv-eyebrow__ic svg { width:100%; height:100%; }
.iv-big { font-family: var(--font-numeral); line-height:0.92; position:relative; }
.iv-foot { font: 500 12px/1.4 var(--font-sans); opacity:0.9; position:relative; }

/* ════════ A · NÚMEROS DE DESTAQUE ════════ */
.iv-stat { width: 210px; }
.iv-stat .iv-big { font-size: 62px; margin: 14px 0 6px; }
.iv-stat__unit { font-size: 24px; opacity:0.85; }
.iv-stat__lbl { font: 700 13px/1.3 var(--font-sans); position:relative; }

/* stat com ícone grande */
.iv-icstat { width: 220px; }
.iv-icstat__ic { width:34px; height:34px; opacity:0.95; position:relative; }
.iv-icstat__ic svg { width:100%; height:100%; }
.iv-icstat .iv-big { font-size: 50px; margin: 12px 0 4px; }
.iv-icstat__lbl { font: 600 13px/1.35 var(--font-sans); position:relative; opacity:0.95; }

/* duo split */
.iv-duo { width: 250px; display:grid; grid-template-columns:1fr 1fr; gap:0; padding:0; }
.iv-duo__half { padding:18px 18px; }
.iv-duo__half:first-child { border-right:1px solid rgba(255,255,255,0.22); }
.iv-duo__n { font-family:var(--font-numeral); font-size:38px; line-height:1; }
.iv-duo__l { font:600 11px/1.3 var(--font-sans); opacity:0.9; margin-top:6px; }

/* mega % */
.iv-pct { width: 200px; }
.iv-pct .iv-big { font-size: 70px; margin:12px 0 4px; }
.iv-pct__lbl { font:700 13px/1.3 var(--font-sans); position:relative; }

/* ════════ B · CLIMA VIVO ════════ */
.iv-temp { width: 224px; }
.iv-temp__head { display:flex; align-items:center; justify-content:space-between; position:relative; }
.iv-temp__ic { width:40px; height:40px; }
.iv-temp__ic svg { width:100%; height:100%; }
.iv-temp .iv-big { font-size: 60px; margin:8px 0 2px; }
.iv-temp__row { display:flex; gap:14px; margin-top:10px; position:relative; }
.iv-temp__chip { font:600 11px/1 var(--font-sans); opacity:0.92; }
.iv-temp__chip b { font-weight:700; }

/* forecast 5 dias */
.iv-fc { width: 268px; }
.iv-fc__grid { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin-top:14px; position:relative; }
.iv-fc__day { text-align:center; background:rgba(255,255,255,0.14); border-radius:11px; padding:10px 4px; }
.iv-fc__dn { font:700 9px/1 var(--font-sans); letter-spacing:0.05em; text-transform:uppercase; opacity:0.85; }
.iv-fc__ic { width:20px; height:20px; margin:8px auto; opacity:0.95; }
.iv-fc__ic svg { width:100%; height:100%; }
.iv-fc__t { font:700 14px/1 var(--font-numeral); }

/* condições da neve */
.iv-snow { width: 230px; }
.iv-snow .iv-big { font-size:46px; margin:12px 0 2px; }
.iv-snow__bars { display:flex; flex-direction:column; gap:7px; margin-top:14px; position:relative; }
.iv-snow__b { display:flex; align-items:center; justify-content:space-between; font:600 11px/1 var(--font-sans); }
.iv-snow__track { flex:1; height:6px; border-radius:99px; background:rgba(255,255,255,0.25); margin:0 9px; overflow:hidden; }
.iv-snow__fill { height:100%; border-radius:99px; background:#fff; }

/* índice UV / gauge mini */
.iv-uv { width: 200px; text-align:center; }
.iv-uv .iv-big { font-size:60px; margin:10px 0 2px; }
.iv-uv__scale { display:flex; gap:3px; margin-top:12px; position:relative; }
.iv-uv__seg { flex:1; height:7px; border-radius:99px; background:rgba(255,255,255,0.3); }
.iv-uv__seg--on { background:#fff; }

/* nascer / pôr do sol */
.iv-sun { width: 240px; }
.iv-sun__arc { position:relative; height:64px; margin-top:8px; }
.iv-sun__row { display:flex; justify-content:space-between; margin-top:6px; position:relative; }
.iv-sun__t { font:700 18px/1 var(--font-numeral); }
.iv-sun__l { font:600 9px/1 var(--font-sans); letter-spacing:0.06em; text-transform:uppercase; opacity:0.8; margin-top:4px; }

/* ════════ C · AVALIAÇÕES & PROVA SOCIAL ════════ */
.iv-rate { width: 216px; }
.iv-rate .iv-big { font-size:64px; margin:10px 0 4px; }
.iv-rate__stars { display:flex; gap:2px; position:relative; }
.iv-rate__stars svg { width:16px; height:16px; }
.iv-rate__lbl { font:600 12px/1.3 var(--font-sans); opacity:0.92; margin-top:8px; position:relative; }

/* selo / badge */
.iv-seal { width: 200px; text-align:center; }
.iv-seal__ring { width:96px; height:96px; margin:6px auto 10px; border:3px solid rgba(255,255,255,0.5); border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; }
.iv-seal__n { font-family:var(--font-numeral); font-size:34px; line-height:1; }
.iv-seal__s { font:700 8px/1 var(--font-sans); letter-spacing:0.1em; text-transform:uppercase; opacity:0.85; margin-top:3px; }
.iv-seal__cap { font:700 13px/1.3 var(--font-sans); position:relative; }

/* depoimento */
.iv-quote { width: 260px; }
.iv-quote__mark { font-family:var(--font-numeral); font-size:48px; line-height:0.6; opacity:0.5; position:relative; }
.iv-quote__txt { font:500 14px/1.45 var(--font-sans); position:relative; margin-top:4px; }
.iv-quote__by { font:700 11px/1 var(--font-sans); letter-spacing:0.04em; text-transform:uppercase; opacity:0.8; margin-top:12px; position:relative; }

/* NPS / barra */
.iv-nps { width: 240px; }
.iv-nps .iv-big { font-size:52px; margin:10px 0 4px; }
.iv-nps__track { height:10px; border-radius:99px; background:rgba(255,255,255,0.25); overflow:hidden; margin-top:8px; position:relative; }
.iv-nps__fill { height:100%; border-radius:99px; background:#fff; }
.iv-nps__lbl { font:600 12px/1.3 var(--font-sans); opacity:0.92; margin-top:10px; position:relative; }

/* ════════ D · ORÇAMENTO VIVO ════════ */
.iv-price { width: 216px; }
.iv-price__from { font:700 11px/1 var(--font-sans); letter-spacing:0.06em; text-transform:uppercase; opacity:0.82; position:relative; }
.iv-price .iv-big { font-size:50px; margin:8px 0 2px; }
.iv-price__cur { font-size:22px; opacity:0.85; }
.iv-price__sub { font:600 12px/1.3 var(--font-sans); opacity:0.9; position:relative; }

/* desconto */
.iv-off { width: 200px; text-align:center; }
.iv-off .iv-big { font-size:72px; margin:6px 0 0; }
.iv-off__tag { display:inline-block; font:700 11px/1 var(--font-sans); letter-spacing:0.08em; text-transform:uppercase; background:rgba(36,34,88,0.14); padding:6px 12px; border-radius:99px; margin-top:10px; position:relative; }

/* parcelamento */
.iv-inst { width: 224px; }
.iv-inst__row { display:flex; align-items:baseline; gap:6px; position:relative; }
.iv-inst__x { font-family:var(--font-numeral); font-size:40px; line-height:1; }
.iv-inst__v { font-family:var(--font-numeral); font-size:40px; line-height:1; }
.iv-inst__lbl { font:600 12px/1.4 var(--font-sans); opacity:0.9; margin-top:8px; position:relative; }
.iv-inst__total { font:600 11px/1 var(--font-sans); opacity:0.78; margin-top:4px; position:relative; }

/* economia */
.iv-save { width: 220px; }
.iv-save__old { font:600 14px/1 var(--font-sans); opacity:0.7; text-decoration:line-through; position:relative; }
.iv-save .iv-big { font-size:46px; margin:6px 0 4px; }
.iv-save__badge { font:700 11px/1 var(--font-sans); letter-spacing:0.05em; text-transform:uppercase; background:rgba(255,255,255,0.2); padding:5px 11px; border-radius:99px; display:inline-block; position:relative; }

/* câmbio */
.iv-fx { width: 230px; }
.iv-fx__pair { display:flex; align-items:center; gap:9px; position:relative; }
.iv-fx__c { font:700 14px/1 var(--font-sans); }
.iv-fx__ar { opacity:0.7; }
.iv-fx .iv-big { font-size:40px; margin:12px 0 2px; }
.iv-fx__sub { font:600 11px/1.3 var(--font-sans); opacity:0.85; position:relative; }

/* ════════ E · ROTEIRO VIVO ════════ */
.iv-cd { width: 250px; }
.iv-cd__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:14px; position:relative; }
.iv-cd__cell { background:rgba(255,255,255,0.16); border-radius:12px; padding:11px 0; text-align:center; }
.iv-cd__n { font-family:var(--font-numeral); font-size:30px; line-height:1; }
.iv-cd__l { font:700 8px/1 var(--font-sans); letter-spacing:0.08em; text-transform:uppercase; opacity:0.8; margin-top:5px; }

/* duração */
.iv-dur { width: 220px; }
.iv-dur .iv-big { font-size:54px; margin:10px 0 2px; }
.iv-dur__route { display:flex; align-items:center; gap:7px; font:700 12px/1 var(--font-sans); margin-top:8px; position:relative; }
.iv-dur__route svg { width:13px; height:13px; opacity:0.8; }

/* distância total */
.iv-km { width: 210px; }
.iv-km .iv-big { font-size:56px; margin:10px 0 2px; }
.iv-km__unit { font-size:22px; opacity:0.85; }
.iv-km__lbl { font:600 12px/1.3 var(--font-sans); opacity:0.9; position:relative; }

/* próxima parada */
.iv-next { width: 240px; }
.iv-next__row { display:flex; align-items:center; gap:12px; position:relative; }
.iv-next__pin { width:38px; height:38px; flex-shrink:0; }
.iv-next__pin svg { width:100%; height:100%; }
.iv-next__name { font:800 19px/1.05 var(--font-sans); }
.iv-next__meta { font:600 11px/1.3 var(--font-sans); opacity:0.85; margin-top:3px; }
.iv-next__eta { font:700 12px/1 var(--font-sans); background:rgba(255,255,255,0.2); padding:5px 10px; border-radius:99px; display:inline-block; margin-top:12px; position:relative; }

/* progresso da viagem */
.iv-prog { width: 250px; }
.iv-prog__head { display:flex; align-items:baseline; justify-content:space-between; position:relative; }
.iv-prog .iv-big { font-size:38px; }
.iv-prog__d { font:700 12px/1 var(--font-sans); opacity:0.85; }
.iv-prog__track { height:12px; border-radius:99px; background:rgba(36,34,88,0.16); overflow:hidden; margin-top:12px; position:relative; }
.iv-prog__fill { height:100%; border-radius:99px; background:var(--wlc-space-cadet); }
.iv-prog__steps { display:flex; justify-content:space-between; margin-top:9px; font:700 9px/1 var(--font-sans); letter-spacing:0.04em; text-transform:uppercase; opacity:0.8; position:relative; }

/* checklist done */
.iv-done { width: 234px; }
.iv-done__li { display:flex; align-items:center; gap:9px; padding:6px 0; font:600 13px/1.2 var(--font-sans); position:relative; }
.iv-done__box { width:18px; height:18px; border-radius:6px; background:rgba(255,255,255,0.22); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.iv-done__box svg { width:11px; height:11px; stroke:#fff; stroke-width:3; fill:none; }
.iv-done__li--off { opacity:0.55; }
.iv-done__li--off .iv-done__box { background:rgba(255,255,255,0.1); }