/* /eventos (rascunho, 2026-10-11; era /workshops). Figma: desktop 123:3491 (1440), celular 123:3624 (390). */

.ev-topo .miolo{display:flex;flex-direction:column;align-items:flex-start;gap:calc(16 * var(--px));padding:calc(200 * var(--px)) calc(96 * var(--px)) calc(72 * var(--px));}
.ev-chamada{font-size:calc(48 * var(--px));}
.ev-titulo{font-size:calc(200 * var(--px));line-height:.96;white-space:nowrap;}
.ev-descricao{width:calc(620 * var(--px));color:var(--escuro);font-size:calc(18 * var(--px));line-height:1.5;letter-spacing:-.03em;text-wrap:pretty;}
.ev-filtros{display:flex;flex-wrap:wrap;gap:calc(10 * var(--px));padding-top:calc(24 * var(--px));}
.ev-filtros button{text-transform:uppercase;border:1px solid var(--escuro);border-radius:999px;padding:calc(7 * var(--px)) calc(14 * var(--px));color:var(--escuro);
  font-weight:700;font-size:calc(12 * var(--px));line-height:1.25;letter-spacing:-.03em;transition:background .2s,color .2s;}
.ev-filtros button:hover{background:rgba(20,20,20,.08);}
.ev-filtros button[aria-pressed=true]{background:var(--escuro);color:var(--branco);}
.ev-filtros button:focus-visible{outline:2px solid var(--branco);outline-offset:2px;}

/* Costura do Tamagotchi. .glitch (motion.css) põe position:relative; a costura precisa continuar absoluta. */
.costura.glitch.ev-costura{position:absolute;--x:85.35%;--r:-6deg;--w:260;}

/* Próxima turma */
.ev-proxima .miolo{padding:calc(96 * var(--px));}
.ev-destaque{display:flex;gap:calc(48 * var(--px));align-items:center;}
.ev-destaque-img{width:calc(720 * var(--px));height:calc(460 * var(--px));flex-shrink:0;object-fit:cover;}
.ev-vazio{background:#e2dfdc;border:1px dashed #c4beb8;display:flex;align-items:center;justify-content:center;padding:calc(16 * var(--px));
  text-align:center;font-weight:700;font-size:calc(12 * var(--px));line-height:1.25;letter-spacing:-.03em;}
.ev-destaque-texto{flex:1 0 0;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:calc(14 * var(--px));}
.ev-tipo{color:var(--laranja);text-transform:uppercase;}
.ev-destaque-texto .display{font-size:calc(48 * var(--px));line-height:1;}
.ev-destaque-texto .acento{font-size:calc(26 * var(--px));}
.ev-destaque-texto a[data-pendente]{cursor:default;}

/* Grade de aulas */
.ev-lista .miolo{display:flex;flex-direction:column;gap:calc(48 * var(--px));padding:0 calc(96 * var(--px)) calc(96 * var(--px));}
.ev-grade{display:grid;grid-template-columns:repeat(3,calc(400 * var(--px)));column-gap:calc(24 * var(--px));row-gap:calc(48 * var(--px));}
.ev-card{display:flex;flex-direction:column;gap:calc(12 * var(--px));}
.ev-card[hidden]{display:none;}
.ev-card .capa{width:100%;height:calc(260 * var(--px));background:#e2dfdc;}
.ev-card .capa img{width:100%;height:100%;object-fit:cover;}
/* sem foto: capa tipográfica com o tipo do evento, em vez de um retângulo vazio */
.ev-capa-vazia{display:flex;align-items:flex-end;width:100%;height:100%;padding:calc(20 * var(--px));background:var(--escuro);color:var(--laranja);
  font-size:calc(56 * var(--px));line-height:.9;overflow:hidden;transition:transform .6s var(--ease);}
.ev-card:hover .ev-capa-vazia{transform:scale(1.03);}
.ev-card .capa{overflow:hidden;}
.ev-card-descricao{color:#4a4a4a;text-wrap:pretty;}
.ev-card-titulo{font-weight:400;font-size:calc(22 * var(--px));line-height:1.18;letter-spacing:-.03em;}
.ev-mais{display:flex;justify-content:center;}
.ev-botao-mais{background:var(--claro);border:1px solid var(--escuro);border-radius:999px;padding:calc(18 * var(--px)) calc(30 * var(--px));
  font-size:calc(14 * var(--px));line-height:1.25;letter-spacing:-.03em;}

/* Aviso de turma */
.ev-aviso .miolo{display:flex;gap:calc(96 * var(--px));align-items:center;padding:calc(96 * var(--px));}
.ev-aviso-texto{flex:1 0 0;min-width:0;display:flex;flex-direction:column;gap:calc(10 * var(--px));}
.ev-aviso-texto .acento{font-size:calc(36 * var(--px));color:var(--laranja);}
.ev-aviso-texto .display{font-size:calc(80 * var(--px));line-height:.96;}
.ev-aviso-form{width:calc(520 * var(--px));flex-shrink:0;display:flex;}
.ev-aviso-form input{flex:1 0 0;min-width:0;height:calc(56 * var(--px));border:0;border-radius:0;background:var(--branco);color:var(--escuro);
  padding:0 calc(20 * var(--px));font:inherit;font-size:calc(15 * var(--px));line-height:1.5;letter-spacing:-.03em;}
.ev-aviso-form input::placeholder{color:var(--escuro);opacity:1;}
.ev-aviso-form input:focus-visible{outline:2px solid var(--laranja);outline-offset:-2px;}
.ev-aviso-form button{height:calc(56 * var(--px));background:var(--laranja);color:var(--branco);padding:0 calc(30 * var(--px));
  font-size:calc(14 * var(--px));line-height:1.25;letter-spacing:-.03em;flex-shrink:0;}
.ev-aviso-form button:focus-visible{outline:2px solid var(--branco);outline-offset:2px;}

/* ---------- Rolagem (11/10) ----------
   Topo preso por um instante (--a): o título desliza para a esquerda e a chamada para a direita,
   como uma cortina que abre para a lista. Destaque: a foto se revela da esquerda e o texto sobe.
   Cards: sobem um a um. Aviso: as duas linhas do título entram em sequência. Sem JS ou com
   movimento reduzido, tudo fica no lugar final (valores de reserva do var()). */
.js .ev-topo-trilho>.percurso{display:block;height:40svh;}
.js .ev-topo-trilho .ev-topo{position:sticky;top:0;min-height:100svh;display:flex;align-items:center;}
.ev-titulo{translate:calc(var(--a,0) * -48 * var(--px)) 0;}
.ev-chamada{translate:calc(var(--a,0) * 72 * var(--px)) 0;}
.ev-descricao,.ev-filtros{translate:0 calc(var(--a,0) * -24 * var(--px));}
.ev-destaque{--k:clamp(0, var(--e,1) / .7, 1);}
.ev-destaque-img{clip-path:inset(0 calc((1 - var(--k)) * 100%) 0 0);}
.ev-destaque-texto>*{--k2:clamp(0, (var(--e,1) - .2 - var(--atraso,0)) / .5, 1);opacity:var(--k2);translate:0 calc((1 - var(--k2)) * 30 * var(--px));}
.ev-destaque-texto>:nth-child(2){--atraso:.06;} .ev-destaque-texto>:nth-child(3){--atraso:.12;}
.ev-destaque-texto>:nth-child(4){--atraso:.18;} .ev-destaque-texto>:nth-child(5){--atraso:.24;}
.ev-grade>li{--k:clamp(0, (var(--e,1) - var(--atraso,0)) / .45, 1);opacity:var(--k);translate:0 calc((1 - var(--k)) * 50 * var(--px));}
.ev-grade>li:nth-child(3n+2){--atraso:.1;} .ev-grade>li:nth-child(3n){--atraso:.2;}
.ev-aviso-texto .linha{display:inline-block;--k:clamp(0, (var(--e,1) - var(--atraso,0)) / .4, 1);opacity:var(--k);translate:calc((1 - var(--k)) * -60 * var(--px)) 0;}
.ev-aviso-texto .linha+.linha{--atraso:.12;}
.ev-aviso-texto .acento{--k:clamp(0, (var(--e,1) + .1) / .4, 1);opacity:var(--k);}

/* ---------- Celular (quadro de 390) ---------- */
@media (max-width:767px){
  .ev-topo .miolo{padding:calc(112 * var(--px)) calc(24 * var(--px)) calc(96 * var(--px));} /* Figma: 152, espaço do adesivo, que virou costura */
  .ev-chamada{font-size:calc(26 * var(--px));}
  .ev-titulo{font-size:calc(64 * var(--px));}
  .ev-descricao{width:100%;font-size:calc(16 * var(--px));}
  .ev-titulo{translate:calc(var(--a,0) * -16 * var(--px)) 0;}
  .ev-chamada{translate:calc(var(--a,0) * 30 * var(--px)) 0;}
  .js .ev-topo-trilho>.percurso{height:30svh;}
  .costura.glitch.ev-costura{--x:84.4%;--w:83;}

  .ev-proxima .miolo{padding:calc(56 * var(--px)) calc(24 * var(--px));}
  .ev-destaque{flex-direction:column;align-items:flex-start;gap:calc(28 * var(--px));}
  .ev-destaque-img{width:100%;height:calc(219 * var(--px));}
  .ev-vazio{padding:calc(16 * var(--px)) calc(8 * var(--px));}
  .ev-destaque-texto{flex:none;width:100%;}
  .ev-destaque-texto .display{font-size:calc(32 * var(--px));}

  .ev-lista .miolo{gap:calc(28 * var(--px));padding:0 calc(24 * var(--px)) calc(56 * var(--px));}
  .ev-grade{grid-template-columns:1fr;row-gap:calc(16 * var(--px));}
  .ev-grade>li:nth-child(4){margin-top:calc(12 * var(--px));}
  .ev-botao-mais{padding:calc(18 * var(--px)) calc(20 * var(--px));}

  .ev-aviso .miolo{flex-direction:column;align-items:flex-start;gap:calc(28 * var(--px));padding:calc(56 * var(--px)) calc(24 * var(--px));}
  .ev-aviso-texto{flex:none;width:100%;}
  .ev-aviso-texto .acento{font-size:calc(26 * var(--px));}
  .ev-aviso-texto .display{font-size:calc(40 * var(--px));line-height:1;}
  .ev-aviso-form{width:100%;}
  .ev-aviso-form input{height:calc(48 * var(--px));font-size:16px;}
  .ev-aviso-form button{height:auto;padding:calc(18 * var(--px)) calc(20 * var(--px));}
}

@media (prefers-reduced-motion: reduce){
  .js .ev-topo-trilho .ev-topo{position:relative;min-height:0;display:block;}
}