/* 07 · impacto — "A corrida movimenta a cidade". f-cidade varrido; "R$ 49 milhões" sobe com o sol.
   Texto à direita (lado calmo do quadro: céu e baía), véu do lado do texto. Tudo sob #impacto. */
#impacto .im-stage { background: #2a1838; }
#impacto .im-bg { position: absolute; inset: 0; overflow: hidden;
  background: linear-gradient(180deg, #3b2556 0%, #6d4a7c 42%, #c98a4a 58%, #3a2544 72%, #1d1026 100%); }
#impacto .im-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transform-origin: 50% 55%; filter: brightness(1.04) contrast(.98) saturate(1.05); }
/* a luz do sol subindo (só na reserva: o filme tem o próprio sol) */
#impacto .im-sun { position: absolute; left: 50%; top: 52%; width: 70vmax; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(255, 244, 214, .85) 0%, rgba(255, 214, 107, .5) 12%, rgba(244, 178, 35, .2) 34%, rgba(244, 178, 35, 0) 70%); }
#impacto .im-film { background: transparent; opacity: 0; transition: opacity .6s ease; }
#impacto.im-has-film .im-film, #impacto.im-has-poster .im-film { opacity: 1; }
#impacto.im-has-film .im-bg, #impacto.im-has-poster .im-bg { visibility: hidden; }

/* véu do lado do texto: forte na borda direita, livre sobre o sol e a ponte */
/* + um véu que desce do canto de cima à direita e morre na diagonal do quadro: o "Impacto econômico" mel e o
   começo do título ficavam sobre o céu claro (contraste ~1,3–2,4). O sol fica do outro lado da diagonal, intacto */
#impacto .im-scrim { background:
  linear-gradient(to bottom left, rgba(14, 7, 19, .62) 0%, rgba(14, 7, 19, .34) 26%, rgba(14, 7, 19, 0) 50%),
  linear-gradient(270deg, rgba(14, 7, 19, .9) 0%, rgba(14, 7, 19, .78) 22%, rgba(40, 5, 50, .46) 40%, rgba(40, 5, 50, .12) 54%, rgba(40, 5, 50, 0) 64%); }
#impacto .im-scrim-b { background: linear-gradient(0deg, rgba(14, 7, 19, .6) 0%, rgba(14, 7, 19, 0) 30%); }

#impacto .im-wrap { position: relative; z-index: 3; height: 100%; display: grid; align-content: center;
  padding-top: calc(var(--hud-h) + clamp(16px, 3vh, 34px)); padding-bottom: clamp(24px, 5vh, 56px); }
/* a câmera no canto de sempre (alto à esquerda), numa plaqueta própria porque ali é o céu do sol.
   Antes ficava no alto à direita, na mesma faixa da coluna: com o texto 10% maior ela encostava no
   "Impacto econômico" (1920) e passava por cima de "A corrida" (1280×720) */
#impacto .im-cam { position: absolute; left: var(--gutter); top: calc(var(--hud-h) + 22px); z-index: 1;
  padding: 6px 12px 6px 10px; color: var(--text); background: rgba(14, 7, 19, .62); box-shadow: 0 2px 14px rgba(14, 7, 19, .28); }
#impacto .im-copy { --span: 7 / 13; display: grid; gap: clamp(12px, 2.2vh, 30px); justify-items: start; }
/* o chapéu vira tarja escura (mel sobre tinta): como rótulo solto ele ficava sobre o céu claro (contraste ~1,7) */
#impacto .im-head { display: grid; gap: 8px; justify-items: start; }
#impacto .im-title { font-size: calc((clamp(36px, 3.6vw, 64px)) * var(--ts, 1)); text-wrap: balance; max-width: 19ch; }

/* o número-herói: "R$ 49" em mel, "MILHÕES" embaixo — como na lâmina */
#impacto .im-hero { display: grid; justify-items: start; margin: 0; font-family: var(--f-display); font-style: italic; font-weight: 900; text-transform: uppercase; line-height: .9; color: var(--honey);
  --glow: 0; filter: drop-shadow(0 0 calc(12px + var(--glow) * 36px) rgba(244, 178, 35, calc(.1 + var(--glow) * .34))) drop-shadow(0 4px 20px rgba(14, 7, 19, .5)); }
/* a caixa do "49" tem ~.26em de ar acima da tinta (a Barlow 900 itálica começa a .185em do topo): puxar
   .1em para cima devolve a altura que o texto 10% maior pede nas telas 16:9 baixas (1280×720, 1366×768),
   sem mexer no tamanho. R$ e 49 andam juntos, o alinhamento pelo topo da tinta fica igual */
#impacto .im-hero__v { display: inline-flex; align-items: flex-start; font-size: calc((clamp(150px, min(17vw, 31vh), 330px)) * var(--ts, 1)); letter-spacing: -.02em; margin-top: -.1em; }
#impacto .im-cur { font-size: .36em; margin: .2em .14em 0 0; letter-spacing: 0; }
#impacto .im-odo { font-variant-numeric: tabular-nums; }
#impacto .im-odo.odo .odo__col { height: 1.02em; }
#impacto .im-odo.odo .odo__strip > span { height: 1.02em; line-height: 1.02; }
#impacto .im-unit { font-size: calc((clamp(64px, min(7.4vw, 13.5vh), 144px)) * var(--ts, 1)); letter-spacing: .005em; margin-top: -.06em; padding-top: .1em; }
#impacto .im-sub { margin-top: clamp(8px, 1.4vh, 16px); font-family: var(--f-display); font-weight: 700; text-transform: uppercase; letter-spacing: .07em; font-size: calc((clamp(18px, .9vw + 8px, 28px)) * var(--ts, 1)); line-height: 1.2; color: var(--offwhite); text-shadow: 0 1px 12px rgba(14, 7, 19, .6); }
#impacto .im-support { max-width: 30ch; color: var(--text-2); font-size: calc((clamp(17px, .6vw + 10px, 22px)) * var(--ts, 1)); padding-left: 16px; border-left: 3px solid var(--honey); text-wrap: balance; }
#impacto .im-nw { white-space: nowrap; } /* "Beira-Mar" não parte no hífen (tablet) */

@media (max-aspect-ratio: 5/6) {
  #impacto .im-copy { --span: 1 / -1; }
  #impacto .im-scrim { background: linear-gradient(0deg, rgba(14, 7, 19, .9) 0%, rgba(14, 7, 19, .72) 36%, rgba(40, 5, 50, .3) 60%, rgba(40, 5, 50, 0) 76%); }
  #impacto .im-wrap { align-content: end; padding-bottom: clamp(48px, 8vh, 110px); }
  #impacto .im-hero__v { font-size: calc((clamp(150px, 24vw, 300px)) * var(--ts, 1)); }
  #impacto .im-unit { font-size: calc((clamp(64px, 10.5vw, 130px)) * var(--ts, 1)); }
}
@media (max-width: 980px) and (min-aspect-ratio: 5/6) {
  #impacto .im-lay { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  #impacto .im-lay > .im-copy { grid-column: 6 / 13; }
}