/* ============================================================
   emcena.css — seção "Projetos em cena" (hub / catálogo).
   Réplica da vitrine de filmes e séries em cartaz da Apple:
   carrossel de pôsteres 9:18 com vizinhos espiando, copy e botão
   sobrepostos, bolinhas-pílula de paginação e pausa do autoplay.
   ============================================================ */
.emc{--emc-h:min(72vh,680px);              /* altura do cartaz manda em tudo (9:20) */
  --emc-w:calc(var(--emc-h) * 9 / 18);
  /* sangria total: a seção mora dentro de um container com largura limitada,
     e o cartaz precisa ficar no centro da TELA, como no cartaz da Apple */
  width:100vw;margin-left:calc(50% - 50vw);
  padding:clamp(56px,10vw,96px) 0 clamp(40px,7vw,64px);background:#fff;overflow:hidden}
.emc__head{text-align:center;padding:0 22px;margin:0 auto clamp(28px,5vw,44px);max-width:640px}
.emc__title{font-size:clamp(28px,6vw,44px);line-height:1.08;font-weight:700;letter-spacing:-.015em;color:#1d1d1f;margin:0}
.emc__sub{font-size:clamp(15px,2.6vw,19px);line-height:1.45;color:#6e6e73;margin:12px auto 0;max-width:34em}

.emc__wrap{position:relative}
.emc__track{display:flex;gap:clamp(10px,2vw,18px);overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  padding:0 max(calc(50% - var(--emc-w) / 2),16px)}
.emc__track::-webkit-scrollbar{display:none}

/* dimensiona pela ALTURA da janela: o cartaz mais alto (9:20) precisa caber
   inteiro na tela, senão a copy da base fica fora do campo de visão */
.emc-card{position:relative;flex:0 0 auto;height:var(--emc-h);width:var(--emc-w);
  max-width:86vw;border-radius:18px;overflow:hidden;scroll-snap-align:center;background:#111;
  box-shadow:0 12px 34px rgba(0,0,0,.14);text-decoration:none;display:block}
.emc-card__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* scrims de pôster: sustentam o lockup e a copy mesmo quando a cena sobe
   até a área do texto (é o que a Apple faz no cartaz, em vez de encolher a foto) */
.emc-card::before{content:"";position:absolute;left:0;right:0;top:0;height:32%;z-index:1;
  background:linear-gradient(to bottom,rgba(0,0,0,.46),rgba(0,0,0,.18) 55%,rgba(0,0,0,0));pointer-events:none}
.emc-card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;z-index:1;
  background:linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,.30) 45%,rgba(0,0,0,0));pointer-events:none}

/* copy sobreposta, réplica do lockup dos banners com copy */
.emc-card__top{position:absolute;left:0;right:0;top:clamp(18px,4%,32px);text-align:center;color:#fff;
  padding:0 14px;text-shadow:0 1px 14px rgba(0,0,0,.35);z-index:2}
.emc-card__marca{display:block;font-size:clamp(9px,1.6vw,12px);font-weight:700;letter-spacing:.32em;text-transform:uppercase;opacity:.92}
/* tipo da peça (Jardineira, Macacão, Conjunto…): padrão fixo acima do tema */
.emc-card__pre{display:block;font-size:clamp(12px,2.3vw,17px);font-weight:700;letter-spacing:.24em;text-transform:uppercase;margin-top:clamp(9px,2vw,15px)}
.emc-card__nome{display:block;font-size:clamp(25px,5.3vw,40px);font-weight:800;letter-spacing:.03em;line-height:1.04;text-transform:uppercase;margin-top:clamp(4px,1vw,8px)}

.emc-card__base{position:absolute;left:0;right:0;bottom:clamp(18px,4%,34px);text-align:center;color:#fff;
  padding:0 18px;text-shadow:0 1px 14px rgba(0,0,0,.4);z-index:2}
.emc-card__cat{display:block;font-size:clamp(14px,2.9vw,20px);font-weight:700;letter-spacing:.01em}
.emc-card__frase{display:block;font-size:clamp(13px,2.6vw,17px);line-height:1.4;margin:6px auto 0;max-width:24em;color:rgba(255,255,255,.94)}
.emc-card__btn{display:inline-block;margin-top:clamp(12px,2.6vw,18px);background:#fff;color:#1d1d1f;
  font-size:clamp(13px,2.6vw,16px);font-weight:500;line-height:1;padding:12px 26px;border-radius:999px}
.emc-card:active .emc-card__btn{transform:scale(.98)}

/* controles: bolinhas-pílula + pausa (réplica Apple) */
.emc__ctrl{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:clamp(18px,3.6vw,26px)}
.emc__dots{display:flex;align-items:center;gap:8px}
.emc__dot{width:8px;height:8px;border-radius:999px;background:#86868b;opacity:.45;border:0;padding:0;cursor:pointer;
  transition:width .35s cubic-bezier(.4,0,.2,1),opacity .35s}
.emc__dot.is-on{width:26px;opacity:1;background:#1d1d1f}
.emc__pause{width:34px;height:34px;border-radius:999px;background:rgba(0,0,0,.06);border:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;color:#1d1d1f}
.emc__pause svg{width:13px;height:13px;fill:currentColor}
/* setas só no desktop, padrão dos carrosséis do hub */
.emc__arrow{display:none;position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:44px;height:44px;
  border-radius:999px;border:0;cursor:pointer;background:rgba(255,255,255,.9);box-shadow:0 4px 16px rgba(0,0,0,.16);
  color:#1d1d1f;align-items:center;justify-content:center}
.emc__arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.emc__arrow--prev{left:18px}
.emc__arrow--next{right:18px}
@media (min-width:900px){
  .emc__arrow{display:inline-flex}
  .emc{--emc-h:min(70vh,640px)}
}
@media (prefers-reduced-motion: reduce){
  .emc__dot{transition:none}
}