/* 17b IMT Academy v2 (pedido 30/10: "capricha mais, joga interação, sem fugir do tamanho"). Placa branca com grade de
   pontos e lente que segue o mouse; logo de vidro dentro da mira, que inclina para o mouse (no toque, flutua), com brilho
   passando e varredura atrás; chips que acendem em sequência (lime opaco entrando de lado, nunca esmaecendo: regra 8).
   Mesma altura da v1 de 320 a 1920 (±1 px, PT e ES; varredura de 52 larguras na CONSTRUCAO.md): a coluna de texto tem a
   largura exata da v1 (a placa sai --ac-lado + 1 px para fora do container), então título e linha quebram igual; o logo
   abaixo de 500 px cresce com a tela como o da v1 (90vw − 61 px = o logo da v1 menos os 22 px que a placa ocupa a mais).
   Nasce parada e inteira: os laços só rodam com
   .acad-anima (academy.js) e param fora da tela, com a aba oculta e no Pausar (.acad-viva sai). Menos movimento: o JS
   nem liga e a regra 12 zera o resto. Layout sem transform (regra 10); preto e cinza só sobre branco. */
.academy{--ac-fora:12px;--ac-dentro:22px;--ac-borda:4px;--ac-lado:calc(var(--margem) - var(--ac-borda) - 1px);--ac-masc:ellipse 95% 28% at 50% 15%;padding-block:var(--ac-fora)}
.academy__placa{position:relative;isolation:isolate;display:grid;gap:12px;align-items:center;margin-inline:calc(-1px - var(--ac-lado));padding:var(--ac-dentro) var(--ac-lado);border:1px solid var(--fio-papel);border-radius:var(--r-xl);background:var(--branco)}

/* fundo: grade de pontos só em volta do logo (empilhada: só no palco; some antes do texto) e a lente que a escurece em volta do mouse */
.academy__fundo{position:absolute;inset:0;z-index:-1;overflow:hidden;border-radius:inherit;pointer-events:none}
.academy__fundo::before{content:"";position:absolute;inset:0;background:radial-gradient(circle,#C7C7C7 0 1.1px,transparent 1.6px) 0 0/22px 22px;-webkit-mask:radial-gradient(var(--ac-masc),#000 25%,transparent 75%);mask:radial-gradient(var(--ac-masc),#000 25%,transparent 75%)}
.academy__lente{position:absolute;left:-150px;top:-150px;width:300px;height:300px;opacity:0;-webkit-mask:radial-gradient(closest-side,#000 30%,transparent);mask:radial-gradient(closest-side,#000 30%,transparent);transform:translate(var(--mx,0px),var(--my,0px));transition:opacity .35s,transform .5s var(--ease-out)}
.academy__lente>div{position:absolute;left:150px;top:150px;width:1400px;height:1000px;background:radial-gradient(circle,#000 0 1.4px,transparent 1.9px) 0 0/22px 22px;transform:translate(calc(var(--mx,0px) * -1),calc(var(--my,0px) * -1));transition:transform .5s var(--ease-out)}
.acad-mira .academy__lente{opacity:1}

/* palco: a mira em volta, a varredura atrás do logo, o logo que inclina (perspectiva no pai), o brilho recortado pelo
   próprio logo (cópia branca em soft-light) e a sombra no chão */
.academy__palco{position:relative;isolation:isolate;display:grid;justify-items:center;padding:10px 14px 14px}
.academy__mira,.academy__varre{position:absolute;inset:0;pointer-events:none}
.academy__mira{background:linear-gradient(#000 0 0) 0 0/20px 1.5px,linear-gradient(#000 0 0) 0 0/1.5px 20px,linear-gradient(#000 0 0) 100% 0/20px 1.5px,linear-gradient(#000 0 0) 100% 0/1.5px 20px,linear-gradient(#000 0 0) 0 100%/20px 1.5px,linear-gradient(#000 0 0) 0 100%/1.5px 20px,linear-gradient(#000 0 0) 100% 100%/20px 1.5px,linear-gradient(#000 0 0) 100% 100%/1.5px 20px;background-repeat:no-repeat;transition:transform .5s var(--mola)}
.acad-mira .academy__mira,.academy__placa:focus-within .academy__mira{transform:scale(.97)}
.academy__varre{z-index:-1;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);mask:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent)}
/* varredura = um fio de laser com rastro curto (28 px) que some enquanto chega: rastro longo parado no pé virava névoa */
.academy__varre::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,0) calc(100% - 28px),rgba(0,0,0,.05) calc(100% - 1px),rgba(0,0,0,.25) calc(100% - 1px));transform:translateY(-101%)}
.academy__flutua{position:relative;width:min(100%,calc(90vw - 61px),380px)}
.academy__ar{perspective:900px}
.academy__objeto{position:relative;transform:rotateX(calc(var(--ax,0) * -9deg)) rotateY(calc(var(--ay,0) * 13deg));transition:transform .7s var(--ease-out)}
.academy__placa:focus-within .academy__objeto{--ax:.35;--ay:.45}
.academy__logo{display:block;width:100%;max-width:none}
.academy__logo img,.academy__brilho img{width:100%;height:auto}
.academy__brilho{position:absolute;inset:0;overflow:hidden;mix-blend-mode:soft-light;pointer-events:none}
.academy__brilho>div{position:absolute;inset:0;-webkit-mask:linear-gradient(100deg,transparent 40%,#000 50%,transparent 60%);mask:linear-gradient(100deg,transparent 40%,#000 50%,transparent 60%);transform:translateX(-80%)}
.academy__brilho img{filter:brightness(0) invert(1);transform:translateX(80%)}
.academy__sombra{position:absolute;left:14%;right:14%;bottom:-4px;height:20px;z-index:-1;background:radial-gradient(closest-side,rgba(0,0,0,.2),rgba(0,0,0,0));transform:translateX(calc(var(--ay,0) * -12px));transition:transform .7s var(--ease-out)}

/* texto e chips (o lime entra por cima do branco do chip, com a borda preta: lime só como área cheia) */
.academy h2 .serifada{font-size:clamp(2.1rem,6.4vw,3.7rem)}
.academy__linha{margin-top:16px;max-width:28em;color:var(--apoio-papel)}
/* chips em fileiras fixas (o que dá a altura igual em toda largura): abaixo de 500, 2 + 2 + 1; dali para cima, 3 + 2 (sem
   chip órfão sozinho na 2ª fileira) */
.academy__oferta{display:flex;flex-wrap:wrap;gap:8px;max-width:25rem;margin-top:20px}
.academy__oferta li{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 13px 0 11px;border:1.5px solid var(--preto);border-radius:var(--r-pilula);background:var(--branco);font:500 14px/1.1 var(--f-grot);white-space:nowrap}
.academy__oferta li::after{content:"";order:-1;width:6px;height:6px;background:currentColor}
/* o lime entra pela esquerda e sai pela direita por escala (cor lisa: igual a deslizar), sem passar da borda do chip */
.academy__oferta li::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--lime);transform:scaleX(0);transform-origin:0 50%}
.academy__acao{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:24px}
/* ES: "(sitio en portugués)" ao lado do botão (≥ 432); abaixo disso desce para baixo dele e entra no respiro de baixo da
   placa (margens compensam: altura igual à do PT). Fora do link, ligado por aria-describedby (aria-hidden: lido uma vez só);
   vazio em PT. Para o ES quebrar como o PT (a altura da v1): a linha ganha um vão invisível no fim do tamanho que falta
   (3,99em = PT 23,52em − ES 19,53em) e o "Escuela de inteligencia artificial." um tracking um tico mais fechado */
.academy__pt{font-size:14px;line-height:1.3;color:var(--apoio-papel)}
.academy__pt:empty{display:none}
html[lang="es-ES"] .academy__linha::after{content:"";display:inline-block;width:3.99em}
html[lang="es-ES"] .academy h2 .serifada{letter-spacing:-.0444em}
@media (max-width:431.98px){html[lang="es-ES"] .academy__acao{margin:14px 0 -10px;row-gap:4px}html[lang="es-ES"] .academy__pt{flex-basis:100%;font-size:13px;line-height:16px}}
@media (min-width:720px) and (max-width:1023.98px){html[lang="es-ES"] .academy h2 .serifada{letter-spacing:-.0552em}}
.academy__cta:hover .ico--seta{transform:translate(2px,-2px)}

/* laços: só com o JS (.acad-anima), e só andam com .acad-viva (na tela, aba visível, sem Pausar); senão param onde estão */
.acad-anima{--ac-play:paused}.acad-viva{--ac-play:running}
.acad-anima .academy__varre::before{animation:varre 7s var(--ease-mov) infinite var(--ac-play)}
.acad-anima .academy__brilho>div{animation:brilho 6s var(--ease-mov) 1s infinite var(--ac-play)}
.acad-anima .academy__brilho img{animation:brilho-c 6s var(--ease-mov) 1s infinite var(--ac-play)}
.acad-anima .academy__oferta li::before{animation:acende 7.5s var(--ease-mov) var(--dl,0s) infinite var(--ac-play)}
.academy__oferta li:nth-child(2){--dl:1.5s}.academy__oferta li:nth-child(3){--dl:3s}.academy__oferta li:nth-child(4){--dl:4.5s}.academy__oferta li:nth-child(5){--dl:6s}
@media (hover:hover) and (pointer:fine){.academy__oferta li:hover::before{animation:none;transform:none}}
@media (hover:none),(pointer:coarse){.acad-anima .academy__ar{animation:flutua 6s ease-in-out infinite var(--ac-play)}.acad-anima .academy__sombra{animation:sombra 6s ease-in-out infinite var(--ac-play)}}
@keyframes varre{0%{transform:translateY(-101%);opacity:0}8%,40%{opacity:1}52%,100%{transform:none;opacity:0}}
@keyframes brilho{0%{transform:translateX(-80%)}35%,100%{transform:translateX(80%)}}
@keyframes brilho-c{0%{transform:translateX(80%)}35%,100%{transform:translateX(-80%)}}
@keyframes acende{0%{transform:scaleX(0);transform-origin:0 50%}8%{transform:none;transform-origin:0 50%}20%{transform:none;transform-origin:100% 50%}28%,100%{transform:scaleX(0);transform-origin:100% 50%}}
@keyframes flutua{50%{transform:translateY(-7px) rotate(-1.2deg)}}
@keyframes sombra{50%{transform:scaleX(.88)}}

/* < 500: placa a 4 px da borda da tela; 500–1023: empilhada com mais ar (chips em 3 + 2); ≥ 720: placa a 12 px da borda;
   ≥ 1024: a grade da v1 (4fr/7fr, vão 64), placa 33 px para fora do container, a mira emoldura a coluna do logo */
@media (min-width:500px){
  .academy{--ac-fora:20px;--ac-dentro:30px}
  .academy__palco{padding:14px 18px 18px}
  .academy__oferta{max-width:30rem}
}
@media (min-width:720px){.academy{--ac-borda:12px}}
@media (min-width:1024px){
  .academy{--ac-fora:40px;--ac-dentro:45px;--ac-lado:32px;--ac-masc:ellipse 75% 70% at 20% 50%}
  .academy__placa{grid-template-columns:minmax(0,4fr) minmax(0,7fr);column-gap:64px}
  .academy__palco{align-self:stretch;align-content:center}
  .academy__flutua{width:min(100%,440px)}
}