/* Home, O que fazemos, Quem somos, Contato, página de vídeo e 404. */

/* ---------------------------------------------------------------- Home: intro + como atuamos */

.intro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.intro__texto { display: grid; gap: 22px; position: sticky; top: calc(var(--cab) + 32px); }
.processo { display: grid; gap: 22px; }
.processo__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--fio); }
.processo__etapa { display: grid; align-content: start; gap: 10px; padding: 28px 28px 32px 0; border-bottom: 1px solid var(--fio); }
.processo__etapa:nth-child(even) { padding-left: 28px; padding-right: 0; border-left: 1px solid var(--fio); }
.processo__nome { font: 400 clamp(26px, 2.4vw, 32px)/1.1 var(--f-display); color: var(--gelo); }
.processo__texto { color: var(--texto); font-size: 15px; }
@media (max-width: 900px) {
  .intro { grid-template-columns: 1fr; }
  .intro__texto { position: static; }
}
@media (max-width: 560px) {
  .processo__lista { grid-template-columns: 1fr; }
  .processo__etapa, .processo__etapa:nth-child(even) { padding: 22px 0; border-left: 0; }
}

/* ---------------------------------------------------------------- aberturas longas */

.abertura__titulo-longo { font-size: clamp(32px, 4.4vw, 61px); max-width: 19ch; }

/* ---------------------------------------------------------------- O que fazemos: portfólio */

.portfolio__filtros { margin-bottom: clamp(28px, 3vw, 40px); }
.portfolio__grade li[hidden] { display: none; }
.portfolio__vazio { padding: 40px 0; color: var(--texto-2); }
.portfolio__mais { display: flex; justify-content: center; margin-top: clamp(32px, 4vw, 48px); }
.portfolio__mais [hidden] { display: none; }

/* O que fazemos: estrutura. A foto ocupa a coluna da direita de ponta a ponta, do topo à base da
   seção e até a borda da tela; o texto fica no gelo liso ao lado. */
.estrutura { overflow: hidden; padding-bottom: 0; }
.estrutura__miolo { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); }
.estrutura__texto { display: grid; gap: 22px; align-self: center; padding-bottom: var(--secao); }
.estrutura__titulo { font-size: clamp(27px, 3.2vw, 44px); }
@media (max-width: 520px) { .estrutura__titulo .nao-quebra { white-space: normal; } }
.estrutura__frentes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 32px; margin-top: 12px; padding-top: 24px; border-top: 1px solid var(--fio-claro); }
.estrutura__frentes li { display: grid; gap: 8px; align-content: start; }
.estrutura__frentes h3 { font: 600 16px/1.3 var(--f-texto); color: var(--tinta); }
.estrutura__frentes p { font-size: 14px; line-height: 1.5; }
.estrutura__foto { position: relative; min-height: 560px; margin: calc(var(--secao) * -1) calc(var(--sangria) * -1) 0 0; }
.estrutura__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
@media (max-width: 900px) {
  .estrutura__miolo { grid-template-columns: 1fr; gap: 0; }
  .estrutura__texto { padding-bottom: clamp(32px, 7vw, 48px); }
  .estrutura__foto { min-height: 0; aspect-ratio: 4 / 5; margin: 0 calc(var(--gutter) * -1); }
}
@media (max-width: 560px) { .estrutura__frentes { grid-template-columns: 1fr; } }

/* O que fazemos: para quem (4 caixas) */
.publicos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--fio); }
.publico { border-left: 1px solid var(--fio); }
.publico:first-child { border-left: 0; }
.publico a { height: 100%; display: grid; grid-template-rows: auto auto 1fr auto; gap: 16px; padding: 28px clamp(18px, 2vw, 28px) 8px; }
.publico:first-child a { padding-left: 0; }
.publico .display { transition: color .25s; }
.publico a:hover .display { color: var(--ceu); }
.publico a:hover .seta { transform: translateX(4px); }
.publico__tag { font: 600 12px/1.2 var(--f-texto); letter-spacing: .12em; text-transform: uppercase; color: var(--ceu); }
.publico p { font-size: 15px; color: var(--texto); }
@media (max-width: 1080px) {
  .publicos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .publico:nth-child(3) { border-left: 0; }
  .publico:nth-child(3) a { padding-left: 0; }
  .publico:nth-child(n+3) { border-top: 1px solid var(--fio); }
}
@media (max-width: 560px) {
  .publicos { grid-template-columns: 1fr; }
  .publico { border-left: 0; border-top: 1px solid var(--fio); }
  .publico:first-child { border-top: 0; }
  .publico a { padding: 22px 0 24px; }
}

/* ---------------------------------------------------------------- Quem somos */

.medida { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 640px; overflow: hidden;
  background: radial-gradient(48% 78% at 26% 60%, #0E6A9C 0%, #034A80 34%, rgba(3, 51, 94, .55) 62%, rgba(4, 24, 42, 0) 100%), linear-gradient(90deg, #03335E 0%, #04213B 55%, #04182A 100%); }
.medida__foto { margin: 0; position: relative; }
.medida__foto img { position: absolute; left: 50%; top: 52%; width: 112%; max-width: none; height: auto; translate: -50% -50%; filter: drop-shadow(0 40px 60px rgba(0, 0, 0, .45)); will-change: transform; }
.medida__texto { display: grid; align-content: center; gap: 22px; padding: var(--secao) var(--gutter); max-width: 680px; }
.medida__itens { display: grid; gap: 22px; margin: 18px 0 0; padding-top: 26px; border-top: 1px solid var(--fio); }
.medida__itens div { display: grid; gap: 8px; }
.medida__itens dd { margin: 0; color: var(--texto); }
@media (max-width: 900px) {
  .medida { grid-template-columns: 1fr; background: radial-gradient(90% 46% at 50% 24%, #0E6A9C 0%, #034A80 36%, rgba(3, 51, 94, .5) 64%, rgba(4, 24, 42, 0) 100%), linear-gradient(180deg, #03335E 0%, #04182A 70%); }
  .medida__foto { aspect-ratio: 4 / 3; }
  .medida__texto { padding-top: 0; }
}

.assinatura { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--fio); }
.assinatura li { display: grid; align-content: start; gap: 12px; padding: 28px 24px 8px 0; }
.assinatura li + li { padding-left: 24px; border-left: 1px solid var(--fio); }
.assinatura p { font-size: 15px; color: var(--texto); }
@media (max-width: 1080px) {
  .assinatura { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .assinatura li, .assinatura li + li { padding: 24px 20px 24px 0; border-left: 0; border-bottom: 1px solid var(--fio); }
}
@media (max-width: 560px) { .assinatura { grid-template-columns: 1fr; } .assinatura h3 br { display: none; } }  /* uma coluna: "Olhar 360" numa linha só, como os outros */

.vm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 80px); }
.vm > div { display: grid; gap: 16px; align-content: start; }
.vm .display { color: var(--gelo); }
@media (max-width: 760px) { .vm { grid-template-columns: 1fr; } }

.manifesto__miolo { display: grid; gap: 28px; max-width: 880px; }
.manifesto__abertura { font-size: clamp(26px, 3.05vw, 41px); line-height: 1.2; }
.manifesto__texto { font-size: 18px; line-height: 1.7; max-width: 66ch; }
.manifesto__fecho { display: grid; gap: 6px; padding-top: 28px; border-top: 1px solid var(--fio-claro); }
.manifesto__fecho span:last-child { color: var(--tinta-2); }

/* ---------------------------------------------------------------- Contato */

.contato { padding-top: calc(var(--cab) + clamp(56px, 7vw, 96px)); min-height: 100svh; }
.contato__miolo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.contato__texto { display: grid; gap: 22px; }
.contato__texto .d1 { font-size: clamp(34px, 4.1vw, 54px); }
.contato__canais { display: grid; gap: 18px; margin-top: 16px; padding-top: 24px; border-top: 1px solid var(--fio); }
.contato__canais li { display: grid; gap: 6px; color: var(--gelo); font-size: 17px; }
.contato__canais a:hover { color: var(--ceu); }
.contato__form { padding: clamp(24px, 3vw, 40px); border-radius: var(--raio); background: rgba(4, 24, 42, .55); border: 1px solid var(--fio); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@media (max-width: 900px) { .contato__miolo { grid-template-columns: 1fr; } }


/* ---------------------------------------------------------------- Página de vídeo */

.video-pg { padding-top: calc(var(--cab) + 40px); }
.video-pg__trilha { display: flex; gap: 10px; font-size: 14px; color: var(--texto-2); margin-bottom: 22px; }
.video-pg__trilha a { color: var(--ceu); }
.video-pg__tela { position: relative; aspect-ratio: 16 / 9; border-radius: var(--raio); overflow: hidden; background: #000; }
.video-pg__tela iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-pg__info { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; margin-top: 32px; align-items: start; }
.video-pg__ficha { display: grid; gap: 16px; margin: 0; }
.video-pg__ficha div { display: grid; gap: 6px; }
.video-pg__ficha dd { margin: 0; color: var(--gelo); }
.video-pg__ficha a { color: var(--gelo); border-bottom: 1px solid var(--fio); }
.video-pg__ficha a:hover { color: var(--ceu); }
@media (max-width: 760px) { .video-pg__info { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- 404 */

.naoachada { min-height: 100svh; display: grid; align-items: center; text-align: center; }
.naoachada .botoes { justify-content: center; }

/* aberturas com foto: no celular a faixa fica em pé e o assunto da foto não está no centro */
@media (max-width: 700px) {
  .pg-fazemos .abertura__fundo[style] { background-position: 72% center; }
  .pg-somos .abertura__fundo[style] { background-position: 70% center; }
}