/* =========================================================
   Engenho de Ideias — Case Detran/RS Carnaval (complementos)
   ========================================================= */

/* Capa do filme: peça 16:9, sem o zoom herdado do thumbnail do YouTube */
.case-cover .video-facade img { transform: none; filter: contrast(1); }
.case-cover .video-facade:hover img { transform: scale(1.03); filter: contrast(1); }

/* Imagens de peça: mostrar a peça inteira, não recortada */
.kv .shot-wrap.is-piece { aspect-ratio: auto; background: #fff; border-color: var(--line-strong); }
.kv .shot-wrap.is-piece .shot { position: relative; height: auto; object-fit: contain; }
.kv .shot-wrap.is-square { aspect-ratio: 1 / 1; }
.kv .shot-wrap.is-wide { aspect-ratio: 16 / 9; }

/* Legenda simples da peça */
.kv .piece-cap { display: flex; align-items: baseline; gap: 14px; padding-top: 14px; font-family: var(--sans); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }
.kv .piece-cap b { color: var(--orange); font-weight: 500; }

/* ============ Jingle ============ */
.jingle { border-block: 1px solid var(--line-strong); background: var(--paper-2); padding-block: clamp(56px, 7vw, 96px); }
.jingle-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.jingle h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(28px, 3.6vw, 52px); line-height: 1.03; letter-spacing: -0.026em; margin: 14px 0 0; max-width: 18ch; text-wrap: balance; }
.jingle h2 em { color: var(--orange); font-style: italic; font-weight: 300; }
.jingle p { font-family: var(--sans); font-size: clamp(15px, 1.1vw, 17px); line-height: 1.6; color: var(--ink-soft); margin: 20px 0 0; max-width: 46ch; }

.player { border: 1px solid var(--line-strong); background: var(--paper); padding: clamp(22px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 22px; }
.player .top { display: flex; align-items: center; gap: 18px; }
.player .pp { flex: none; width: clamp(56px, 5vw, 72px); height: clamp(56px, 5vw, 72px); border-radius: 50%; border: 0; background: var(--ink); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .4s ease, transform .55s cubic-bezier(0.16, 1.08, 0.32, 1); }
.player .pp:hover { background: var(--orange); transform: scale(1.05); }
.player .pp svg { width: 34%; height: 34%; fill: currentColor; }
.player .pp .ico-pause { display: none; }
.player.is-playing .pp .ico-play { display: none; }
.player.is-playing .pp .ico-pause { display: block; }
.player .label { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.player .label .t { font-family: var(--sans); font-weight: 500; font-size: clamp(15px, 1.1vw, 17px); color: var(--ink); }
.player .label .s { font-family: var(--sans); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }

.player .bars { display: flex; align-items: flex-end; gap: 3px; height: 46px; }
.player .bars i { flex: 1; background: var(--line-strong); border-radius: 2px; height: 22%; transform-origin: bottom; transition: height .28s ease, background .28s ease; }
.player.is-playing .bars i { background: var(--orange); animation: jbar 1.05s ease-in-out infinite; }
@keyframes jbar { 0%, 100% { height: 18%; } 50% { height: 92%; } }

.player .track { display: flex; align-items: center; gap: 14px; }
.player .track .time { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; letter-spacing: 0.08em; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.player .track .rail { position: relative; flex: 1; height: 3px; background: var(--line-strong); cursor: pointer; }
.player .track .rail > span { position: absolute; inset: 0 auto 0 0; width: 0%; background: var(--orange); }

@media (max-width: 900px) { .jingle-grid { grid-template-columns: 1fr; } }

/* ============ Nas estradas (comparativo) ============ */
.road { margin-top: clamp(48px, 6vw, 76px); border-top: 1px solid #ffffff1a; padding-top: clamp(28px, 3vw, 40px); }
.road > h3 { font-family: var(--sans); font-weight: 500; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--leaf); margin: 0 0 clamp(22px, 2.4vw, 32px); }
.road-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 56px); }
.road-item { display: flex; flex-direction: column; gap: clamp(16px, 1.6vw, 22px); }
.road-item > h4 { font-family: var(--sans); font-weight: 500; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: #fff; margin: 0; }
.road-item .chart { display: flex; flex-direction: column; gap: 12px; }
.road-row { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; }
.road-row .yr { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; letter-spacing: 0.1em; color: var(--gray-2); }
.road-row .bar { height: 14px; background: #ffffff12; overflow: hidden; }
.road-row .bar > span { display: block; height: 100%; width: 0; background: #ffffff2e; transition: width 1.3s cubic-bezier(0.16, 1.08, 0.32, 1); }
.road.in .road-row .bar > span { width: var(--p); }
.road-row .v { font-family: var(--serif); font-weight: 300; font-size: clamp(20px, 1.8vw, 26px); line-height: 1; letter-spacing: -0.03em; color: var(--gray-2); font-variant-numeric: tabular-nums; }
.road-row.now .bar > span { background: var(--orange); transition-delay: .18s; }
.road-row.now .v { color: var(--orange); font-size: clamp(26px, 2.4vw, 34px); }
.road-row.now .yr { color: #fff; }
.road-item p { font-family: var(--sans); font-size: 14px; line-height: 1.5; color: var(--gray-2); margin: 0; }
.road-note { margin-top: clamp(26px, 3vw, 40px); font-family: var(--sans); font-size: 13px; line-height: 1.6; color: var(--gray-2); max-width: 62ch; }
@media (max-width: 900px) { .road-grid { grid-template-columns: 1fr; } }

/* ============ Veículos ============ */
.channels { padding-block: clamp(64px, 8vw, 110px); border-bottom: 1px solid var(--line-strong); }
.channels h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(26px, 3.2vw, 44px); line-height: 1.04; letter-spacing: -0.024em; margin: 0 0 clamp(28px, 3.4vw, 44px); max-width: 20ch; }
.channels h2 em { color: var(--orange); font-style: italic; font-weight: 300; }
.ch-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-strong); }
.ch { padding: clamp(22px, 2.2vw, 30px) clamp(16px, 1.6vw, 24px); border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); display: flex; flex-direction: column; gap: 12px; }
.ch:last-child { border-right: 0; }
.ch .k { font-family: var(--sans); font-weight: 500; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--orange); }
.ch p { font-family: var(--sans); font-size: 14px; line-height: 1.55; color: var(--ink-soft); margin: 0; }
@media (max-width: 900px) { .ch-grid { grid-template-columns: 1fr; } .ch { border-right: 0; } }