/* Página de espera da temática IELB 2027-2028. Uma tela só: sem menu, sem download, sem rolagem longa.
   Cores e fontes da ficha oficial "padrão Cores e Fontes" (os mesmos hex de /provisorio). */
@font-face { font-family: "Tematica Titulo"; src: url("fontes/tematica-titulo-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Tematica Texto"; src: url("fontes/tematica-texto-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Tematica Texto"; src: url("fontes/tematica-texto-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --verde-floresta: #2C3E37;
  --salvia: #64866C;
  --salvia-clara: #A1B18B;
  --nevoa: #E3E8E6;
  --grafite: #292A29;
  --fonte-titulo: "Tematica Titulo", Georgia, serif;
  --fonte-texto: "Tematica Texto", Georgia, serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .9rem; padding: 1.2rem 1rem 1rem;
  background: var(--nevoa) url("img/textura.webp") center / cover; background-blend-mode: overlay;
  color: var(--grafite); font: 1.0625rem/1.55 var(--fonte-texto);
  font-variant-ligatures: no-common-ligatures no-contextual;
  -webkit-font-smoothing: antialiased; text-align: center;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--salvia); outline-offset: 3px; }

.lema { margin: 0; font: 700 clamp(2rem, 7vw, 4rem)/1.04 var(--fonte-titulo); color: var(--verde-floresta); }
.lema span { display: block; }
.lema .verde { color: var(--salvia); }

.fio { display: block; width: 4.5rem; height: 1px; background: var(--salvia); opacity: .6; }

.assinatura { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .3rem 1.2rem; }
.ano { font-weight: 700; letter-spacing: .3em; margin-right: -.3em; font-size: 1rem; }
.alvo { margin: 0; font-size: .95rem; line-height: 1.25; }

/* Faixa de baixo: os dois cartazes e o clipe lado a lado, para ocupar a largura da tela.
   No celular ela quebra e fica cartazes em cima, clipe embaixo — a mesma ordem. */
.faixa { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.2rem 2.5rem; width: 100%; max-width: 74rem; }
.artes { display: grid; grid-template-columns: 1fr 1fr; justify-items: center; gap: .9rem; flex: 0 1 28rem; }
.artes img { width: auto; max-width: 100%; max-height: 38svh; box-shadow: 0 .6rem 1.5rem color-mix(in srgb, var(--grafite) 25%, transparent); }

.live {
  display: inline-flex; flex-direction: column; gap: .1rem; padding: .65rem 1.3rem; min-height: 2.75rem;
  background: var(--verde-floresta); color: var(--nevoa); text-decoration: none; border-radius: .6rem;
  font-size: 1rem; line-height: 1.35;
}
.live:hover, .live:focus-visible { background: var(--salvia); }
.live b { font-size: 1rem; }
.live span { font-size: .85rem; color: var(--salvia-clara); }

/* Vídeo do clipe do quadriênio: o player só entra no clique, pelo youtube-nocookie. */
.clipe { flex: 1 1 24rem; max-width: 34rem; }
.clipe-quadro { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--grafite); border-radius: .4rem; }
.clipe-quadro iframe, .clipe-capa { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.clipe-capa { display: block; cursor: pointer; padding: 0; background: none; }
.clipe-capa img { width: 100%; height: 100%; object-fit: cover; }
.clipe-play {
  position: absolute; left: 50%; top: 50%; width: 3.2rem; height: 3.2rem; margin: -1.6rem 0 0 -1.6rem;
  border-radius: 50%; background: var(--salvia); border: 2px solid var(--nevoa);
}
.clipe-play::after {
  content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%);
  border: .62rem solid transparent; border-left: 1.02rem solid var(--nevoa); border-right: 0;
}
.clipe-capa:hover .clipe-play, .clipe-capa:focus-visible .clipe-play { background: var(--verde-floresta); }
.clipe-rotulo { margin: .4rem 0 0; font-size: .85rem; color: var(--salvia); }

.rodape { display: flex; justify-content: center; }
.rodape img { width: 7.5rem; }

@media (min-width: 620px) {
  body { gap: 1rem; padding: 1.5rem 1.5rem 1.2rem; }
  .artes { gap: 1.1rem; }
}
@media (min-width: 980px) {
  body { gap: 1.1rem; padding: 1.6rem 2.5rem 1.3rem; }
  .faixa { gap: 1.2rem 3.5rem; }
  .artes img { max-height: 40svh; }
}