/* 17 · Oportunidades para as marcas — hora dourada. Três janelas de DETALHE que o 18 e o 19 não mostram em
   primeiro plano (a ponta da rede com a placa de quadra, o balcão com copos e sucos, a câmera que grava a
   entrevista), cada uma com o mockup de marca e o texto do slide num cartão sólido (sem texto sobre foto). A cena
   inteira de cada foto só se revela no 18 e no 19. Assinatura: o título sobe e sai, entra "O set decisivo é o seu."
   e a marca é impressa nas três cenas ao mesmo tempo. O sol desce com o relógio da arena (--sun-f, escrito pelo núcleo). */
#oportunidades .opt-stage { background: #0b1924; }
/* hora dourada (16:44–17:07): o sol ainda está no céu — faixa âmbar alta e clara, céu azul-entardecer em cima
   (o navy de noite com o horizonte em brasa fica para o crepúsculo do 20) */
#oportunidades .opt-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(70% 50% at 74% 74%, rgba(255, 214, 158, .46), rgba(242, 151, 109, .14) 55%, transparent 76%),
    linear-gradient(180deg, #0d1e2c 0%, #173249 20%, #34485d 36%, #7c6259 52%, #c98a5c 64%, #eeae72 72%, #ffd49a 76.4%); }
#oportunidades .opt-sunbox { position: absolute; left: 74%; top: 76%; width: 0; height: 0; z-index: 1; pointer-events: none; }
#oportunidades .opt-sun { --sun-size: 44vmin; --alt: sin(calc(var(--sun-f, .82) * 180deg)); left: 0; top: 0;
  transform: translate(-50%, -50%) translateY(calc(var(--alt) * -52vh)); transition: transform .6s linear; }
#oportunidades .opt-sea { position: absolute; left: 0; right: 0; top: 76%; bottom: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, #8c6a55 0%, #4a4549 12%, #1d2a36 42%, #0e1c27 72%, #0a1822 100%);
  box-shadow: 0 -1px 0 rgba(255, 214, 158, .5); }
#oportunidades .opt-sea::before { content: ''; position: absolute; left: 74%; top: 0; width: 34vmin; height: 46%; transform: translateX(-50%); opacity: .28;
  background: repeating-linear-gradient(180deg, rgba(255, 200, 138, .9) 0 1px, transparent 1px 9px);
  -webkit-mask-image: radial-gradient(50% 100% at 50% 0%, #000 20%, transparent 100%); mask-image: radial-gradient(50% 100% at 50% 0%, #000 20%, transparent 100%); }
#oportunidades .net { z-index: 1; }

#oportunidades .opt-wrap { position: relative; z-index: 3; height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; row-gap: clamp(14px, 2.6vh, 30px);
  padding-top: calc(var(--hud-h) + clamp(16px, 3.6vh, 44px)); padding-bottom: clamp(14px, 2.6vh, 26px); }

/* cabeçalho: dois estados na mesma célula (título → frase), a linha fina à direita fica */
#oportunidades .opt-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
#oportunidades .opt-hbox { grid-column: 1 / 9; display: grid; container-type: inline-size; }
#oportunidades .opt-hA, #oportunidades .opt-hB { grid-area: 1 / 1; display: grid; gap: clamp(8px, 1.4vh, 14px); align-content: end; }
#oportunidades .opt-hB { opacity: 0; }
#oportunidades .opt-title { font-family: var(--f-display); font-stretch: 125%; font-weight: 900; text-transform: uppercase; line-height: 1.08; letter-spacing: -.01em; color: var(--sand);
  font-size: min(calc(6.1cqi * var(--ts, 1)), 6.71cqi); padding-top: .06em; }
#oportunidades .opt-title span { display: block; }
#oportunidades .opt-phrase { font-family: var(--f-display); font-stretch: 125%; font-weight: 900; text-transform: uppercase; line-height: 1.1; letter-spacing: -.012em; color: var(--sand);
  font-size: min(calc(6.6cqi * var(--ts, 1)), 7.26cqi); padding-top: .06em; }
#oportunidades .opt-l { display: block; }
#oportunidades .opt-lede { grid-column: 9 / 13; justify-self: end; max-width: 22ch; text-align: right; padding-bottom: .3em; color: var(--sand);
  font-size: calc((clamp(17px, .7vw + 9px, 23px)) * var(--ts, 1)); text-shadow: 0 1px 12px rgba(10, 24, 34, .6); }

/* as três frentes */
#oportunidades .opt-fronts { container-type: inline-size; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr);
  column-gap: var(--gap); align-self: center; max-height: 100%; min-height: 0; }
/* cartão sólido: translúcido, a faixa do horizonte atravessava atrás do texto e o cartão ficava com dois tons */
#oportunidades .opt-front { padding: 0; overflow: hidden; display: flex; flex-direction: column; min-height: 0; background: rgba(16, 38, 51, .95); }
#oportunidades .opt-win { position: relative; flex: 0 1 auto; width: 100%; aspect-ratio: 1.12 / 1; min-height: 0; overflow: hidden; border-radius: var(--r) var(--r) 0 0;
  background: linear-gradient(180deg, #e2b58a 0%, #cf8a62 46%, #3d4550 47%, #22323f 100%); }
#oportunidades .opt-cam { position: absolute; inset: 0; container-type: size; transform-origin: 50% 50%; }
/* recorte de detalhe com ponto focal (--fx, --fy): a figura guarda a proporção da foto (CV.mock mede por ela). O
   zoom sai do trecho da foto que tem de aparecer: --zw = 1 / fração da largura, --z = 1 / fração da altura; vale o
   menor (o trecho inteiro cabe) e nunca menos que cobrir a janela. A janela muda de proporção (1,12:1; mais larga
   em 1280 × 720 e em pé): sem --z o recorte é medido só pela largura e não abre para os lados até pegar a cena
   inteira ou uma placa cortada na borda. */
#oportunidades .opt-mock { --W: max(100cqw, calc(100cqh * var(--mock-ar, 16 / 9)), min(calc(100cqw * var(--zw, 1)), calc(100cqh * var(--mock-ar, 16 / 9) * var(--z, 99))));
  --H: calc(var(--W) / (var(--mock-ar, 16 / 9)));
  position: absolute; width: var(--W); height: auto; max-width: none;
  left: clamp(100cqw - var(--W), 50cqw - var(--fx, .5) * var(--W), 0px);
  top: clamp(100cqh - var(--H), 50cqh - var(--fy, .5) * var(--H), 0px); }
#oportunidades .opt-mock > img { color: transparent; }
/* a máscara do painel é PNG em tons de cinza (sem alfa): sem mask-mode luminance o navegador lê o alfa (todo
   opaco) e a tinta passava por cima de quem está na frente da placa. Ver core_requests. */
#oportunidades .mock__ink { -webkit-mask-mode: luminance; mask-mode: luminance; }
/* impressão da marca: o núcleo supõe ~0,83 em por letra e a Archivo 125% ocupa 0,88 ("SUA MARCA" passava da
   placa e era cortado); na largura 100% (0,72 em) cabe com folga. Ver core_requests. */
#oportunidades .mock__panel { font-stretch: 100%; letter-spacing: 0; } /* sem texto alternativo pintado se a foto faltar */
#oportunidades .opt-glint { position: absolute; inset: -10% -40%; z-index: 2; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 236, 212, .5) 50%, transparent 62%); }
#oportunidades .opt-txt { flex: 1 0 auto; display: grid; align-content: start; gap: clamp(6px, 1vh, 10px); padding: clamp(14px, 2vh, 22px) clamp(16px, 1.5vw, 24px) clamp(16px, 2.2vh, 26px); }
#oportunidades .opt-k { display: flex; align-items: center; gap: 12px; }
#oportunidades .opt-n { flex: none; }
#oportunidades .opt-rule { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(242, 151, 109, .7), rgba(242, 151, 109, 0)); transform-origin: 0 50%; }
#oportunidades .opt-txt .h3 { color: var(--sand); }
#oportunidades .opt-txt .body { font-size: calc((clamp(15px, .45vw + 9.6px, 18px)) * var(--ts, 1)); line-height: 1.5; }

#oportunidades .opt-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; }
#oportunidades .opt-foot .footnote { color: var(--text-2); }

/* movimento reduzido: o título fica (a frase é apoio), a marca já impressa */
.reduced #oportunidades .opt-hB { display: none; }

/* baixo (1280 × 720 e menores): menos ar */
@media (max-height: 760px) and (orientation: landscape) {
  #oportunidades .opt-txt { padding-top: 12px; padding-bottom: 14px; }
  #oportunidades .opt-txt .body { line-height: 1.42; }
}

/* retrato (tablet em pé): as três frentes em linhas, janela à esquerda e texto à direita */
@media (orientation: portrait) {
  #oportunidades .opt-hbox { grid-column: 1 / -1; }
  #oportunidades .opt-lede { grid-column: 1 / -1; justify-self: start; text-align: left; max-width: 40ch; margin-top: 12px; }
  #oportunidades .opt-title { font-size: min(calc(5.2cqi * var(--ts, 1)), 5.72cqi); }
  #oportunidades .opt-phrase { font-size: min(calc(6cqi * var(--ts, 1)), 6.6cqi); }
  #oportunidades .opt-fronts { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(3, minmax(0, 1fr)); row-gap: clamp(12px, 1.6vh, 20px); align-self: stretch; }
  #oportunidades .opt-front { flex-direction: row; }
  #oportunidades .opt-win { width: 54%; aspect-ratio: auto; flex: none; border-radius: var(--r) 0 0 var(--r); }
  #oportunidades .opt-txt { flex: 1 1 0; align-content: center; }
  #oportunidades .opt-sunbox { left: 70%; }
}