/* Página de projeto (frame "Páginas Cases" do Figma), usada por /cases/ e /ia/. Medidas em px do Figma via var(--s), como na home. */

/* Destaque: imagem parada. Se for vídeo, vira link .midia.video e abre no modal. */
.destaque{position:relative;display:block;height:calc(1192.76 * var(--s));overflow:hidden}
/* O vermelho só marca hero ainda sem mídia. Em hero com mídia ele vazava como linha, no arredondamento da altura. */
.destaque:empty{background:var(--vermelho)}
.destaque img,.destaque video,.destaque.midia img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.destaque.video{cursor:pointer}
/* Play PROVISÓRIO: trocar pelo ícone que o Will vai desenhar. */
.midia.video{position:relative}
.play{position:absolute;left:50%;top:50%;width:calc(110 * var(--s));aspect-ratio:1;border-radius:50%;background:var(--creme);transform:translate(-50%,-50%);transition:transform .3s}
.play::after{content:"";position:absolute;left:54%;top:50%;border-style:solid;border-width:calc(20 * var(--s)) 0 calc(20 * var(--s)) calc(32 * var(--s));border-color:transparent transparent transparent var(--preto);transform:translate(-50%,-50%)}
.midias .play{width:calc(80 * var(--s))}
.midias .play::after{border-width:calc(14 * var(--s)) 0 calc(14 * var(--s)) calc(23 * var(--s))}
.midia.video:hover .play{transform:translate(-50%,-50%) scale(1.08)}

.case{padding-top:calc(100 * var(--s));padding-bottom:calc(100 * var(--s))}
.case .rotulo{margin-top:calc(21 * var(--s))}

/* Mídias à esquerda (910), texto à direita (755), 175 de respiro. */
.colunas{display:grid;grid-template-columns:910fr 755fr;column-gap:calc(175 * var(--s));align-items:start;margin-top:calc(40 * var(--s))}
.midias{display:flex;flex-direction:column;gap:calc(20 * var(--s))}
.midia{display:block;overflow:hidden;cursor:zoom-in}
.midia img,.midia video{display:block;width:100%;height:auto;object-fit:cover;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.midia:hover img,.midia:hover video{transform:scale(1.03)}
/* Destaque com imagem borrada, para poster que não aguenta a ampliação. A escala esconde a borda que o blur deixa translúcida. */
.destaque.borrado img{filter:blur(calc(24 * var(--s)));transform:scale(1.1)}
.destaque.borrado:hover img{transform:scale(1.13)}

.texto{display:flex;flex-direction:column;gap:calc(37 * var(--s));font-weight:500;font-size:calc(26 * var(--s));line-height:1.2}
.texto p{margin:0 0 calc(20 * var(--s))}
.texto p:last-child{margin-bottom:0}
.texto ul,.texto ol{margin:0 0 calc(20 * var(--s));padding-left:1.2em}
.texto li + li{margin-top:calc(10 * var(--s))}
.texto ul li::marker,.texto ol li::marker{color:var(--vermelho)}
.texto p a{text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px;transition:color .3s}
.texto p a:hover{color:var(--vermelho)}
.texto i{font-style:italic}
.texto h2{margin:0 0 calc(20 * var(--s));font-weight:700;font-size:inherit;line-height:inherit;color:var(--vermelho)}
.texto section + section{padding-top:calc(37 * var(--s));border-top:1px solid var(--creme)}
.resumo{margin:0;padding:calc(20 * var(--s)) 0 calc(20 * var(--s)) calc(24.78 * var(--s));border-left:4px solid var(--vermelho)}
.ferramentas{display:flex;align-items:center;gap:calc(14 * var(--s))}
.ferramenta{position:relative;display:block;outline:0}
.ferramenta img{display:block;width:calc(var(--w) * var(--s));height:auto}
.ferramenta::after{content:attr(data-nome);position:absolute;left:50%;bottom:100%;margin-bottom:calc(12 * var(--s));padding:calc(8 * var(--s)) calc(14 * var(--s));background:var(--creme);color:var(--preto);font-size:calc(18 * var(--s));font-weight:500;line-height:1;white-space:nowrap;pointer-events:none;opacity:0;transform:translate(-50%,calc(6 * var(--s)));transition:opacity .25s,transform .25s}
.ferramenta:hover::after,.ferramenta:focus-visible::after{opacity:1;transform:translate(-50%,0)}

/* Anterior / próximo */
.navega{display:grid;grid-template-columns:1fr 1fr;margin-top:calc(100 * var(--s));padding-top:calc(34.5 * var(--s));border-top:.69px solid var(--creme)}
.navega a{display:flex;flex-direction:column;gap:calc(22.8 * var(--s))}
.navega .proximo{align-items:flex-end;text-align:right}
.seta{display:inline-flex;align-items:center;gap:calc(12 * var(--s));font-weight:500;font-size:calc(22 * var(--s));letter-spacing:calc(-1.1 * var(--s));line-height:1}
.seta img{width:calc(26.66 * var(--s));height:auto;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.anterior .seta img{transform:rotate(180deg)}
.anterior:hover .seta img{transform:rotate(180deg) translateX(calc(8 * var(--s)))}
.proximo:hover .seta img{transform:translateX(calc(8 * var(--s)))}
.nome-case{font-size:calc(26 * var(--s));letter-spacing:calc(-1.3 * var(--s));line-height:1;transition:color .2s}
.navega a:hover .nome-case{color:var(--vermelho)}

/* Modal de mídia: cabe na altura da tela, X acima do canto direito. Clique nos lados troca de mídia; X, acima/abaixo da mídia ou Esc fecham. */
.modal{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:rgba(22,22,22,.7);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.modal.aberto{opacity:1;visibility:visible}
.modal figure{position:relative;margin:0;transform:scale(.97);transition:transform .4s cubic-bezier(.16,1,.3,1)}
.modal.aberto figure{transform:none}
.palco img,.palco video{display:block;max-width:calc(1840 * var(--s));max-height:calc(100dvh - 2 * max(64px, 110 * var(--s)));width:auto;height:auto}
.fechar{position:absolute;right:0;bottom:100%;margin-bottom:max(14px, 28 * var(--s));padding:8px;margin-right:-8px;background:none;border:0;cursor:pointer;transition:transform .3s}
.fechar img{width:max(18px, 23.24 * var(--s));height:auto}
.fechar:hover{transform:rotate(90deg)}
.palco.navegavel img{cursor:pointer}
.passa{position:absolute;top:50%;padding:calc(30 * var(--s));background:none;border:0;cursor:pointer;transform:translateY(-50%)}
.passa img{display:block;width:max(22px, 40 * var(--s));height:auto;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.passa.volta{left:calc(25 * var(--s))}
.passa.segue{right:calc(25 * var(--s))}
.passa.volta img{transform:rotate(180deg)}
.passa.volta:hover img{transform:rotate(180deg) translateX(calc(8 * var(--s)))}
.passa.segue:hover img{transform:translateX(calc(8 * var(--s)))}

/* ---------- Celular (provisório, até o layout mobile sair do Figma) ---------- */
@media (max-width:760px){
  .destaque{height:calc(1100 * var(--s))}
  .colunas{display:flex;flex-direction:column;gap:calc(80 * var(--s))}
  .texto{order:-1;gap:calc(50 * var(--s));font-size:calc(36 * var(--s))}
  .texto section + section{padding-top:calc(50 * var(--s))}
  .seta{font-size:calc(32 * var(--s))}
  .nome-case{font-size:calc(32 * var(--s))}
  .navega a{gap:calc(20 * var(--s))}
  .palco img,.palco video{max-width:calc(100vw - 32px)}
  .passa{padding:10px;background:rgba(22,22,22,.7)}
  .passa.volta{left:0}
  .passa.segue{right:0}
}

/* Página ainda sem conteúdo: blocos vermelhos no lugar das mídias, como os cards vazios da home. */
.vazio{display:block;aspect-ratio:910/520;background:var(--vermelho)}