/* ==========================================================================
   Lâminas HTML de Televisão — desenhadas em 1920×1080 e escaladas via --s,
   seguindo o layout das lâminas claras de mídia offline (51–57).
   ========================================================================== */
.hs {
  --tv-navy: #0c1d3e; --tv-teal: #0b7f86; --tv-teal-2: #14a2ad; --tv-orange: #ec6a3b;
  --tv-line: #d3ecee; --tv-mist: #e0f6f7; --tv-text: #33465a;
  position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; overflow: hidden;
  transform-origin: 0 0; transform: scale(var(--s, 1));
  background: linear-gradient(180deg, #ffffff 0%, #f7fcfd 100%);
  color: var(--tv-navy); font-family: 'Plus Jakarta Sans', 'Montserrat', system-ui, sans-serif; line-height: 1.35;
  -webkit-font-smoothing: antialiased; color-scheme: light; text-align: left;
}
.hs * { box-sizing: border-box; }
.hs-deco { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hs-pad { position: absolute; inset: 0; padding: 66px 100px 0; }
.tv-ic { width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.hs-label { display: flex; align-items: center; gap: 18px; font: 600 15px/1 'Montserrat', sans-serif; letter-spacing: .42em; text-transform: uppercase; color: var(--tv-teal-2); }
.hs-label::after { content: ""; width: 110px; height: 2px; background: currentColor; opacity: .6; }
.hs-h { margin: 26px 0 0; font: 800 74px/1 'Montserrat', sans-serif; letter-spacing: -.01em; text-transform: uppercase; color: var(--tv-navy); }
.hs-h em { font-style: normal; color: var(--tv-teal); }
.hs-h .sep { display: inline-block; margin: 0 4px; font-weight: 400; color: var(--tv-teal-2); transform: translateY(-4px); }
.hs-h.xl { font-size: 92px; line-height: .98; }
.hs-bar { width: 170px; height: 7px; margin-top: 22px; border-radius: 4px; background: linear-gradient(90deg, var(--tv-teal), #35c9d4); }
.hs-sub { margin: 22px 0 0; max-width: 1560px; font-size: 28px; line-height: 1.35; color: var(--tv-text); }
.hs-sub b { color: var(--tv-navy); font-weight: 700; }

.hs-circle { width: 86px; height: 86px; border-radius: 50%; flex: none; display: grid; place-items: center; color: var(--tv-teal); background: radial-gradient(circle at 50% 40%, #eafafb, var(--tv-mist)); box-shadow: 0 10px 24px -14px rgba(11, 127, 134, .6), inset 0 0 0 1px rgba(20, 162, 173, .15); }
.hs-circle .tv-ic { width: 42px; height: 42px; }
.hs-circle.lg { width: 118px; height: 118px; }
.hs-circle.lg .tv-ic { width: 56px; height: 56px; }

.hs-card { background: #fff; border: 2px solid var(--tv-line); border-radius: 28px; box-shadow: 0 22px 44px -30px rgba(8, 90, 100, .45); }

.hs-note {
  position: absolute; left: 100px; right: 100px; bottom: 96px; display: flex; align-items: center; gap: 26px;
  padding: 22px 32px; border-radius: 26px; background: linear-gradient(90deg, #e9f8f9, #f3fbfc); border: 2px solid #d5f0f2;
  font-size: 25px; color: var(--tv-text);
}
.hs-note .tv-ic { width: 46px; height: 46px; color: var(--tv-teal); padding-right: 26px; box-sizing: content-box; border-right: 2px solid #b9e3e6; }
.hs-note b { color: var(--tv-teal); font-weight: 800; }
.hs-note.sm { font-size: 20px; padding: 16px 28px; bottom: 92px; }
.hs-note.sm .tv-ic { width: 34px; height: 34px; padding-right: 20px; }

.hs-foot { position: absolute; left: 100px; right: 100px; bottom: 34px; display: flex; align-items: center; gap: 24px; font-size: 17px; color: #4a5b6c; }
.hs-foot::after { content: ""; flex: 1; height: 2px; background: linear-gradient(90deg, #cfeef0, rgba(207, 238, 240, 0)); order: 1; }
.hs-foot .pg { order: 2; font: 700 17px/1 'Montserrat', sans-serif; color: var(--tv-teal); letter-spacing: .12em; }

.tvp-code { display: inline-block; padding: 5px 11px; border-radius: 8px; background: var(--tv-mist); color: var(--tv-teal); font: 800 15px/1 'Montserrat', sans-serif; letter-spacing: .1em; }

/* ---- Programação ---- */
.tvp-grid { position: absolute; left: 100px; top: 334px; width: 1720px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 26px; }
.tvp-card { padding: 24px 28px 22px; display: flex; flex-direction: column; gap: 20px; }
.tvp-card .hs-circle { width: 76px; height: 76px; }
.tvp-card .hs-circle .tv-ic { width: 38px; height: 38px; }
.tvp-top { display: flex; align-items: center; gap: 22px; min-height: 76px; }
.tvp-name { margin-top: 8px; font: 700 27px/1.12 'Montserrat', sans-serif; color: var(--tv-navy); }
.tvp-time { display: inline-block; margin-left: 10px; padding: 4px 10px; border-radius: 8px; background: #fff3ec; color: var(--tv-orange); font: 800 15px/1 'Montserrat', sans-serif; vertical-align: 2px; }
.tvp-prices { display: flex; align-items: flex-end; gap: 16px; padding-top: 18px; border-top: 2px solid #eef6f7; }
.tvp-prices small { display: block; font: 600 14px/1 'Montserrat', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #7c8e9b; margin-bottom: 9px; white-space: nowrap; }
.tvp-prices s { font-size: 22px; color: #8a9aa6; text-decoration-thickness: 2px; white-space: nowrap; }
.tvp-neg b, .tvp-off { white-space: nowrap; }
.tvp-off { margin-bottom: 2px; padding: 7px 12px; border-radius: 10px; background: #fff0e9; color: #d6532a; font: 800 20px/1 'Montserrat', sans-serif; }
.tvp-neg { margin-left: auto; text-align: right; }
.tvp-neg b { font: 800 34px/1 'Montserrat', sans-serif; color: var(--tv-teal); }

/* ---- Cenário ---- */
.tvk-row { position: absolute; left: 100px; right: 100px; top: 318px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.tvk { display: flex; align-items: center; gap: 22px; padding: 22px 26px; }
.tvk .hs-circle { width: 78px; height: 78px; }
.tvk .hs-circle .tv-ic { width: 38px; height: 38px; }
.tvk .div { width: 2px; height: 64px; background: #d6e9ec; }
.tvk b { display: block; font: 800 44px/1 'Montserrat', sans-serif; color: var(--tv-orange); white-space: nowrap; }
.tvk small { display: block; margin-top: 8px; font-size: 19px; color: #506273; }

.tvc-main { position: absolute; left: 100px; right: 100px; top: 476px; display: grid; grid-template-columns: 1240px 1fr; gap: 28px; }
.tvm { padding: 24px 28px 22px; }
.tvm-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.tvm-head > span:first-child { font: 700 16px/1 'Montserrat', sans-serif; letter-spacing: .26em; text-transform: uppercase; color: var(--tv-teal-2); }
.tvm-legend { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; color: #5a6b7b; }
.tvm-legend i { width: 16px; height: 16px; border-radius: 5px; background: linear-gradient(135deg, #35c9d4, var(--tv-teal)); box-shadow: 0 0 10px rgba(53, 201, 212, .6); }
.tvm-grid { display: grid; grid-template-columns: 286px repeat(31, 1fr) 54px 132px; align-items: center; row-gap: 0; }
.tvm-grid > * { height: 44px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid #eef5f6; }
.tvm-grid .hd { height: 30px; font: 600 13px/1 'Montserrat', sans-serif; color: #93a3ad; border-bottom: 2px solid #e2eff1; }
.tvm-grid .hd.on { color: var(--tv-teal); font-weight: 800; }
.tvm-grid .hd.l, .tvm-grid .p { justify-content: flex-start; }
.tvm-grid .hd.r, .tvm-grid .n, .tvm-grid .v { justify-content: flex-end; }
.tvm-grid .p { gap: 12px; min-width: 0; }
.tvm-grid .p b { font: 700 17px/1.1 'Montserrat', sans-serif; color: var(--tv-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tvm-grid .p .tvp-code { font-size: 12px; padding: 5px 8px; }
.tvm-grid .c i { width: 17px; height: 17px; border-radius: 5px; background: #eef5f6; }
.tvm-grid .c.win i { background: #e3f3f5; }
.tvm-grid .c.on i { background: linear-gradient(135deg, #35c9d4, var(--tv-teal)); box-shadow: 0 0 0 3px rgba(53, 201, 212, .18), 0 4px 10px -2px rgba(11, 127, 134, .6); }
.tvm-grid .n { font: 800 20px/1 'Montserrat', sans-serif; color: var(--tv-navy); }
.tvm-grid .v { font: 700 17px/1 'Plus Jakarta Sans', sans-serif; color: #34485c; font-variant-numeric: tabular-nums; }
.tvm-grid .t { border-bottom: 0; background: #f2fafb; font-weight: 800; }
.tvm-grid .t.p { padding-left: 12px; border-radius: 12px 0 0 12px; font: 700 15px/1 'Montserrat', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--tv-teal); }
.tvm-grid .t.dc { font: 800 15px/1 'Montserrat', sans-serif; color: var(--tv-teal); }
.tvm-grid .t.v { border-radius: 0 12px 12px 0; padding-right: 10px; color: var(--tv-navy); font-weight: 800; }

.tvc-side { display: grid; }
.tvc-side.has-video { grid-template-rows: 1fr auto; gap: 20px; }
/* botão "exemplo em vídeo" dentro da lâmina */
.tvv {
  display: flex; align-items: center; gap: 20px; width: 100%; padding: 20px 24px; border: 0; border-radius: 28px; cursor: pointer; text-align: left;
  font: inherit; color: #fff; background: linear-gradient(120deg, #0b6f78, #14a7b2); box-shadow: 0 22px 44px -26px rgba(8, 90, 100, .8);
  transition: transform .25s, box-shadow .25s;
}
.tvv:hover { transform: translateY(-3px); box-shadow: 0 28px 50px -24px rgba(8, 90, 100, .9); }
.tvv-play { width: 64px; height: 64px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--tv-teal); box-shadow: 0 0 0 8px rgba(255, 255, 255, .18); }
.tvv-play .tv-ic { width: 30px; height: 30px; margin-left: 4px; }
.tvv b { display: block; font: 800 22px/1.15 'Montserrat', sans-serif; }
.tvv small { display: block; margin-top: 5px; font-size: 17px; opacity: .9; }
.tvc-break { display: flex; flex-direction: column; justify-content: center; padding: 16px 28px; }
.tvc-break > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 24px 0; border-bottom: 1px solid #edf5f6; font-size: 19px; color: #506273; }
.tvc-break > div:last-child { border-bottom: 0; }
.tvc-break b { font: 700 22px/1 'Montserrat', sans-serif; color: var(--tv-navy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tvc-break .tot { border-top: 2px solid #d7edef; }
.tvc-break .tot span { font: 800 17px/1 'Montserrat', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--tv-teal); }
.tvc-break .tot b { font-size: 27px; font-weight: 800; }

/* ---- Comparativo ---- */
.tvx-cards { position: absolute; left: 100px; right: 100px; top: 318px; display: grid; grid-template-columns: repeat(var(--cols, 2), 1fr); gap: 24px; }
.tvx-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 26px 24px 24px; }
.tvx-card.mc { background: linear-gradient(180deg, #f3fbfc, #fff); }
.tvx-pill { padding: 11px 20px; border-radius: 999px; background: var(--tv-mist); color: var(--tv-teal); font: 800 16px/1 'Montserrat', sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.tvx-card.mc .tvx-pill { background: var(--tv-teal); color: #fff; }
.tvx-st { margin-top: 14px; font: 700 15px/1.2 'Montserrat', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--tv-teal-2); }
.tvx-big { margin-top: 16px; font: 800 44px/1 'Montserrat', sans-serif; color: var(--tv-navy); text-transform: uppercase; }
.tvx-big span { color: var(--tv-orange); }
.tvx-lines { margin-top: 14px; display: grid; gap: 6px; font-size: 19px; color: #506273; }
.tvx-lines b { color: var(--tv-navy); }
.tvx-spark { margin-top: 12px; width: 100%; display: grid; grid-template-columns: repeat(var(--n, 15), 1fr); gap: 4px; align-items: end; height: 60px; padding: 0 4px; border-bottom: 2px solid #e2eff1; }
.tvx-spark i { display: block; border-radius: 5px 5px 2px 2px; background: #edf5f6; height: 7px; }
.tvx-spark i.h1 { height: 28px; background: linear-gradient(#35c9d4, var(--tv-teal)); }
.tvx-spark i.h2 { height: 56px; background: linear-gradient(#35c9d4, var(--tv-teal)); }
.tvx-cap { width: 100%; margin-top: 20px; display: flex; justify-content: space-between; font: 700 12px/1 'Montserrat', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--tv-teal-2); }
.tvx-days { width: 100%; display: grid; grid-template-columns: repeat(var(--n, 15), 1fr); gap: 4px; padding: 7px 4px 0; font: 600 11px/1 'Montserrat', sans-serif; color: #93a3ad; }
.tvx-days span.on { color: var(--tv-teal); font-weight: 800; }
.tvx-total { width: 100%; margin-top: 18px; padding-top: 16px; border-top: 2px solid #e2eff1; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.tvx-total small { font: 800 14px/1 'Montserrat', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--tv-teal); }
.tvx-total b { font: 800 32px/1 'Montserrat', sans-serif; color: var(--tv-navy); font-variant-numeric: tabular-nums; white-space: nowrap; }


/* ---- Versão em texto (celular) ---- */
.tvmob { display: grid; gap: 8px; }
.tvmob-row { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .09); }
.tvmob-row .nm { display: flex; align-items: center; gap: 8px; min-width: 0; font: 700 14px/1.2 'Montserrat', sans-serif; color: #fff; }
.tvmob-row .nm span { flex: none; padding: 3px 6px; border-radius: 6px; background: rgba(53, 232, 242, .14); color: #9ff3f7; font: 800 10.5px/1 'Montserrat', sans-serif; letter-spacing: .08em; }
.tvmob-row .val { font: 700 13.5px/1.2 'Montserrat', sans-serif; color: #9ff3f7; text-align: right; white-space: nowrap; }
.tvmob-row .days { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 5px; }
.tvmob-row .days i { font-style: normal; padding: 4px 8px; border-radius: 8px; background: linear-gradient(135deg, #35e8f2, #14a7b2); color: #03181c; font: 800 11.5px/1 'Montserrat', sans-serif; }
.tvmob-tot { display: grid; gap: 6px; padding: 14px; border-radius: 14px; background: rgba(53, 232, 242, .08); border: 1px solid rgba(53, 232, 242, .3); }
.tvmob-tot div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: #bcd8dc; }
.tvmob-tot b { font-family: 'Montserrat', sans-serif; color: #fff; white-space: nowrap; }
.tvmob-tot div:last-child b { color: #35e8f2; font-size: 16px; }