/* ============================================================
   Portfólio da Michelle — a página mais editorial do site
   As outras páginas abrem escuras; esta abre CLARA, com o nome
   grande e muito ar. A cor de marca aparece em filete e detalhe,
   não em bloco — é uma página de leitura, não de venda.
   Tudo o que está escrito aqui vem do Currículo Lattes (16/09/2026).
   ============================================================ */

/* ---------- abertura ---------- */
.mi-capa{background:var(--creme);padding:calc(var(--e7) + 84px) 0 var(--e6);position:relative;overflow:hidden}
.mi-capa::after{
  content:"";position:absolute;right:-16%;top:-30%;width:62%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(132,192,72,.18),transparent 66%);pointer-events:none;
}
.mi-capa .envolt{position:relative;z-index:2}
.mi-etiqueta{
  display:inline-block;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--verde-marca);font-weight:600;margin-bottom:var(--e3);
}
.mi-nome{
  font-family:var(--fonte-titulo);font-weight:400;letter-spacing:-.025em;
  font-size:clamp(38px,7.4vw,92px);line-height:1;margin:0 0 var(--e4);max-width:14ch;
}
.mi-nome em{font-style:italic;color:var(--verde-marca)}
.mi-frase{font-size:clamp(17px,1.5vw,21px);line-height:1.62;max-width:56ch;color:var(--tinta)}
.mi-frase strong{font-weight:600}

.mi-links{display:flex;gap:var(--e3);flex-wrap:wrap;margin-top:var(--e4);
  padding-top:var(--e3);border-top:1px solid var(--linha-clara)}
.mi-links a{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
  font-size:14.5px;font-weight:600;color:var(--verde-marca);text-decoration:none;
  border-bottom:1px solid rgba(12,96,60,.28);
}
.mi-links a:hover{border-bottom-color:var(--verde-marca)}

/* ---------- números ---------- */
.mi-numeros{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e3);margin-top:var(--e6)}
.mi-num b{display:block;font-family:var(--fonte-titulo);font-weight:600;
  font-size:clamp(30px,3.4vw,44px);line-height:1;color:var(--verde-marca)}
.mi-num span{display:block;margin-top:8px;font-size:14.5px;color:var(--tinta-fraca);max-width:22ch}

/* ---------- seção de duas colunas com título que fica parado ---------- */
.mi-dupla{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:var(--e6);align-items:start}
.mi-lado{position:sticky;top:112px}
.mi-lado h2{font-size:clamp(26px,3vw,38px);margin-bottom:var(--e2)}
.mi-lado p{font-size:15.5px;line-height:1.65;color:var(--tinta-fraca)}
.bloco-escuro .mi-lado p{color:#cfe0d3}

/* ---------- formação: linha do tempo que anda com a rolagem (03/10) ----------
   Cada etapa tem uma "marca" (a faixa da bolinha). O ::before da marca é o
   fio apagado e o ::after é o fio aceso, os dois indo do centro da bolinha
   até o centro da bolinha seguinte (100% da coluna + o vão): bolinha e fio
   batem sem o JS medir nada.
   Sem JS: quatro colunas paradas, tudo aceso. Com o michelle.js:
   - .mt-rola  o fio acende conforme a rolagem (--f, de 0 a 1, em cada
               etapa) e a etapa ganha .mt-lit quando ele chega na bolinha;
   - .mt-viva  (tela larga) a seção gruda e a rolagem empurra a linha pro lado. */
.mt-topo{margin-bottom:var(--e6)}
.mt-topo h2{font-size:clamp(26px,3vw,38px);margin-bottom:var(--e2)}
.mt-topo p{font-size:15.5px;line-height:1.65;color:var(--tinta-fraca);max-width:46ch}

.mt-linha{--vao:40px;--bola:16px;
  list-style:none;padding:0;margin:0 auto;width:min(var(--largura),calc(100% - 48px));
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--vao)}
.mt-etapa{display:flex;flex-direction:column;min-width:0}
.mt-ano{font-family:var(--fonte-titulo);font-size:clamp(32px,3.2vw,44px);font-weight:600;
  line-height:1;color:var(--verde-marca);margin-bottom:var(--e2)}
.mt-marca{position:relative;display:block;height:var(--bola)}
.mt-marca::before,.mt-marca::after{content:"";position:absolute;top:calc(50% - 1px);height:2px;
  left:calc(var(--bola) / 2);width:calc(100% + var(--vao))}
.mt-marca::before{background:#d6ddd3}
.mt-marca::after{background:var(--verde-folha);transform-origin:0 50%;transform:scaleX(var(--f,1))}
.mt-bola{position:absolute;left:0;top:0;z-index:1;width:var(--bola);height:var(--bola);border-radius:50%;
  background:var(--verde-folha);border:2px solid var(--verde-folha);box-shadow:0 0 0 6px rgba(132,192,72,.18)}
/* a última etapa ainda está acontecendo: o fio segue tracejado e some */
.mt-agora .mt-marca::before{display:none}
.mt-agora .mt-marca::after{width:calc(100% - var(--bola) / 2);transform:none;
  background:repeating-linear-gradient(90deg,var(--verde-folha) 0 7px,transparent 7px 13px);
  -webkit-mask-image:linear-gradient(90deg,#000 20%,transparent);mask-image:linear-gradient(90deg,#000 20%,transparent)}
.mt-agora .mt-bola{animation:mt-pulsa 2.4s ease-in-out infinite}
@keyframes mt-pulsa{50%{box-shadow:0 0 0 11px rgba(132,192,72,.06)}}

.mt-texto{padding-top:var(--e3);padding-right:6px}
.mt-periodo{display:block;font-size:13px;font-weight:600;color:var(--tinta-fraca);margin-bottom:6px}
.mt-texto h3{font-family:var(--fonte-texto);font-size:16.5px;font-weight:600;line-height:1.4;margin:0 0 4px}
/* a linha da instituição precisa se separar do parágrafo, senão vira um bloco só */
.mt-onde{display:block;margin:2px 0 8px;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--verde-marca);font-weight:600;line-height:1.5}
.mt-texto p{font-size:14.5px;line-height:1.6;color:var(--tinta-fraca)}

/* com a rolagem: a bolinha que o fio ainda não alcançou fica apagada */
.mt-rola .mt-bola{transition:background .3s ease,border-color .3s ease,box-shadow .45s ease}
.mt-rola .mt-etapa:not(.mt-lit) .mt-bola{background:var(--creme);border-color:#c3ccbf;
  box-shadow:0 0 0 0 rgba(132,192,72,0);animation:none}
.mt-rola .mt-agora .mt-marca::after{opacity:0;transition:opacity .6s ease}
.mt-rola .mt-agora.mt-lit .mt-marca::after{opacity:1}

/* tela larga: a seção gruda na tela e a linha corre pro lado.
   A etapa ainda não alcançada mostra só o ano, num verde mais apagado
   (3,2:1 no creme, passa como texto grande); o texto entra quando o fio
   chega. Opacidade pela metade no texto reprovaria no contraste. */
.mt-viva{padding:0}
.mt-viva .mt-tela{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center}
.mt-viva .mt-topo{margin-bottom:var(--e5)}
.mt-viva .mt-linha{display:flex;width:max-content;margin:0;
  padding-inline:max(24px,calc((100% - var(--largura)) / 2));will-change:transform}
.mt-viva .mt-etapa{flex:none;width:min(500px,36vw)}
.mt-viva .mt-ano{transition:color .4s ease}
.mt-viva .mt-texto{transition:opacity .5s ease,transform .6s cubic-bezier(.22,.7,.25,1)}
.mt-viva .mt-etapa:not(.mt-lit) .mt-ano{color:#6f8f7c}
.mt-viva .mt-etapa:not(.mt-lit) .mt-texto{opacity:0;transform:translateY(12px)}

/* tela média: quatro colunas ainda cabem, com vão menor */
@media (max-width:1180px){ .mt-linha{--vao:28px} }
/* celular e tablet em pé: o fio fica em pé, à esquerda, de cima pra baixo */
@media (max-width:960px){
  .mt-linha{grid-template-columns:1fr;--vao:var(--e5)}
  .mt-etapa{display:grid;grid-template-columns:var(--bola) 1fr;column-gap:var(--e3);
    grid-template-areas:"marca ano" "marca texto";padding-bottom:var(--vao)}
  .mt-etapa:last-child{padding-bottom:0}
  .mt-ano{grid-area:ano;font-size:30px;margin-bottom:0}
  .mt-marca{grid-area:marca;height:auto}
  .mt-bola{top:8px}
  .mt-marca::before,.mt-marca::after{left:calc(50% - 1px);top:calc(8px + var(--bola) / 2);
    width:2px;height:calc(100% + var(--vao))}
  .mt-marca::after{transform-origin:50% 0;transform:scaleY(var(--f,1))}
  .mt-agora .mt-marca::after{width:2px;height:72px;transform:none;
    background:repeating-linear-gradient(180deg,var(--verde-folha) 0 7px,transparent 7px 13px);
    -webkit-mask-image:linear-gradient(180deg,#000 20%,transparent);mask-image:linear-gradient(180deg,#000 20%,transparent)}
  .mt-texto{grid-area:texto;padding-top:var(--e1)}
}
@media (prefers-reduced-motion:reduce){ .mt-agora .mt-bola{animation:none} }

/* ---------- normas de auditoria ---------- */
.mi-normas{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--e2)}
.mi-norma{
  background:rgba(255,255,255,.05);border:1px solid var(--linha);border-radius:14px;padding:var(--e3);
}
.mi-norma b{display:block;font-family:var(--fonte-titulo);font-size:19px;font-weight:600;color:#fff;margin-bottom:4px}
.mi-norma span{font-size:14px;color:#cfe0d3;line-height:1.5}

/* ---------- livros ---------- */
.mi-livros{list-style:none;padding:0;margin:0}
.mi-livro{padding:var(--e3) 0;border-top:1px solid var(--linha-clara);display:grid;
  grid-template-columns:1fr auto;gap:var(--e3);align-items:baseline}
.mi-livro:first-child{border-top:0;padding-top:0}
.mi-livro h3{font-family:var(--fonte-titulo);font-size:21px;font-weight:600;line-height:1.25;margin:0 0 5px}
.mi-livro p{font-size:14.5px;color:var(--tinta-fraca);line-height:1.55;max-width:58ch}
.mi-livro .mi-selo{font-size:13px;font-weight:600;color:var(--verde-marca);white-space:nowrap}

.mi-foto{border-radius:var(--raio);overflow:hidden;margin-top:var(--e5)}
.mi-foto img{width:100%;height:auto;display:block}
.mi-foto figcaption{font-size:13.5px;color:var(--tinta-fraca);padding-top:10px}

/* ---------- reconhecimentos ---------- */
.mi-premios{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e3);margin-top:var(--e5)}
.mi-premio{border-left:3px solid var(--verde-folha);padding-left:var(--e3)}
.mi-premio b{display:block;font-family:var(--fonte-titulo);font-size:19px;font-weight:600;margin-bottom:4px}
.mi-premio span{font-size:14.5px;color:var(--tinta-fraca);line-height:1.55}
.bloco-escuro .mi-premio span{color:#cfe0d3}

/* ---------- lista simples de palestras ---------- */
.mi-fala{list-style:none;padding:0;margin:0;columns:2;column-gap:var(--e5)}
.mi-fala li{break-inside:avoid;padding:10px 0;border-bottom:1px solid var(--linha-clara);
  font-size:15px;line-height:1.5}
.mi-fala li b{display:block;font-weight:600}
.mi-fala li span{color:var(--tinta-fraca);font-size:14px}

/* ---------- responsivo ---------- */
@media (max-width:900px){
  .mi-dupla{grid-template-columns:1fr;gap:var(--e4)}
  .mi-lado{position:static}
  .mi-numeros{grid-template-columns:1fr 1fr;gap:var(--e4)}
  .mi-premios{grid-template-columns:1fr;gap:var(--e4)}
  .mi-fala{columns:1}
  .mi-livro{grid-template-columns:1fr}
  .mi-capa{padding:calc(var(--e6) + 76px) 0 var(--e5)}
}
@media (max-width:560px){
  .mi-numeros{grid-template-columns:1fr}
}

/* ============================================================
   CAMADA DE MOVIMENTO (michelle.js)
   Tudo aqui só ganha vida com o JS: sem ele, a página continua
   inteira e legível — só parada.
   ============================================================ */

/* ---------- herói com profundidade ---------- */
.mi-capa{perspective:1200px;perspective-origin:50% 40%}
.mi-palco{
  transform-style:preserve-3d;
  transform:rotateY(calc(var(--mx,0) * 3.2deg)) rotateX(calc(var(--my,0) * -2.6deg))
            translateY(calc(var(--rolagem,0) * -42px));
  transition:transform .12s linear;
}
.mi-palco > *{transform-style:preserve-3d}
.mi-capa .mi-etiqueta{transform:translateZ(26px)}
.mi-capa .mi-nome{transform:translateZ(72px)}
.mi-capa .mi-frase{transform:translateZ(38px)}
.mi-capa .mi-links{transform:translateZ(22px)}
.mi-capa .mi-numeros{transform:translateZ(14px)}
.mi-capa::after{transform:translate3d(calc(var(--mx,0) * 26px),calc(var(--my,0) * 22px),0)}
/* o brilho de trás anda ao contrário do conteúdo: é o que dá a sensação de fundo */
.mi-folha-fundo{
  position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(12,96,60,.14),transparent 68%);
  transform:translate3d(calc(var(--mx,0) * -34px),calc(var(--my,0) * -26px),0);
}
.mi-folha-fundo.f1{left:-8%;top:8%;width:42vw;max-width:520px;aspect-ratio:1}
.mi-folha-fundo.f2{right:4%;bottom:-14%;width:34vw;max-width:420px;aspect-ratio:1;
  background:radial-gradient(circle,rgba(132,192,72,.16),transparent 68%)}

/* ---------- cartões que inclinam ---------- */
.mi-tilt{
  transform:perspective(760px) rotateY(var(--tx,0deg)) rotateX(var(--ty,0deg));
  transition:transform .35s cubic-bezier(.22,.7,.25,1), box-shadow .35s ease;
  position:relative;
}
.mi-tilt::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(240px circle at var(--gx,50%) var(--gy,50%),
             rgba(132,192,72,.16),transparent 62%);
  opacity:var(--brilho,0);transition:opacity .35s ease;
}
.mi-norma.mi-tilt:hover{box-shadow:0 18px 44px rgba(0,0,0,.28)}
.benef.mi-tilt:hover,.card.mi-tilt:hover{box-shadow:0 20px 46px rgba(10,61,42,.14)}

/* ---------- parallax de foto ---------- */
.mi-parallax{overflow:hidden}
.mi-parallax img{will-change:transform;transform:translate3d(0,0,0);scale:1.12}

/* etiqueta verde em caixa alta — nasceu na seção da copa (que saiu em 03/10),
   hoje é usada na faixa do Prêmio BOC */
.mi-copa-etiq{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--verde-folha);font-weight:600;margin-bottom:var(--e2);max-width:none;
  margin-inline:auto}
@media (min-width:700px){ .mi-copa-etiq{white-space:nowrap} }

@media (prefers-reduced-motion:reduce){
  .mi-palco,.mi-tilt{transform:none !important}
}

/* ============================================================
   ABERTURA CINEMATOGRÁFICA (fotos do Prêmio BOC, 28/03/2026)
   O herói vira escuro: o vestido magenta contra o verde profundo é
   o contraste que faz a foto "acontecer". Ela fica numa camada
   própria, com máscara embaixo pra dissolver no fundo.
   ============================================================ */
.mi-cine{
  background:
    radial-gradient(120% 80% at 76% 45%, rgba(12,96,60,.55), transparent 62%),
    radial-gradient(80% 60% at 18% 12%, rgba(132,192,72,.16), transparent 60%),
    var(--verde-fundo);
  color:#fff;min-height:min(96vh,940px);display:flex;align-items:center;
  padding:calc(var(--e7) + 40px) 0 var(--e6);
}
.mi-cine::after{                      /* vinheta: fecha as bordas como lente de cinema */
  content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:radial-gradient(120% 90% at 50% 45%, transparent 38%, rgba(3,18,11,.55) 100%);
}
.mi-cine .mi-etiqueta{color:var(--verde-folha)}
.mi-cine .mi-nome{color:#fff}
.mi-cine .mi-nome em{color:var(--verde-folha)}
.mi-cine .mi-frase{color:#dfeadf}
.mi-cine .mi-frase strong{color:#fff}
.mi-cine .trilha{color:#9fb5a7}
.mi-cine .trilha a{color:#bfe39a}
.mi-cine .mi-links{border-top-color:var(--linha)}
.mi-cine .mi-links a{color:#eaf3e8;border-bottom-color:rgba(255,255,255,.3)}
.mi-cine .mi-links a:hover{border-bottom-color:var(--verde-folha);color:var(--verde-folha)}
.mi-cine .mi-num b{color:var(--verde-folha)}
.mi-cine .mi-num span{color:#c7d8c9}
.mi-cine .mi-folha-fundo{background:radial-gradient(circle,rgba(132,192,72,.10),transparent 68%)}

/* ela, na camada de trás — mas na frente do brilho */
.mi-retrato{position:absolute;right:clamp(10px,4vw,70px);bottom:0;top:0;margin:0;z-index:1;
  display:flex;align-items:flex-end;pointer-events:none}
.mi-retrato img{
  height:min(94%,880px);width:auto;display:block;
  transform:translate3d(0,var(--sobe,0px),0) scale(var(--zoom,1));
  transform-origin:bottom center;
  /* dissolve no rodapé do bloco: sem linha de corte */
  -webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent 99%);
          mask-image:linear-gradient(to bottom,#000 72%,transparent 99%);
  filter:drop-shadow(-30px 20px 60px rgba(0,0,0,.45));
}
/* o texto passa na frente do vestido, nunca do rosto */
.mi-cine .mi-palco{position:relative;z-index:2}
.mi-cine .mi-nome{max-width:13ch}
.mi-cine .mi-frase{max-width:46ch}
.mi-cine .mi-numeros{max-width:62ch}

/* grão de filme: ruído gerado no próprio SVG, sem baixar imagem */
.mi-grao{
  position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.32;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='r'><feTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23r)' opacity='.55'/></svg>");
  background-size:160px 160px;
}

/* ---------- faixa de cinema (2.39:1) do Prêmio BOC ---------- */
.mi-faixa{position:relative;background:#04150d;overflow:hidden}
.mi-faixa-foto{position:relative;aspect-ratio:2.39/1;overflow:hidden}
.mi-faixa-foto img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(var(--zoom,1.08));transform-origin:50% 42%;will-change:transform}
.mi-faixa-foto::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(4,21,13,.92) 4%,rgba(4,21,13,.25) 42%,transparent 70%)}
.mi-faixa-texto{position:absolute;left:0;right:0;bottom:0;z-index:2;
  width:min(var(--largura),calc(100% - 48px));margin-inline:auto;padding-bottom:clamp(20px,4vw,52px);color:#fff}
.mi-faixa-texto h2{font-size:clamp(24px,3.6vw,46px);line-height:1.1;margin:0 0 10px;max-width:18ch}
.mi-faixa-texto p{font-size:clamp(14.5px,1.3vw,17px);color:#dfeadf;max-width:52ch;line-height:1.55}
.mi-faixa-texto em{font-style:italic}

.mi-foto-trofeu{max-width:420px}

@media (max-width:900px){
  /* no celular ela não pode virar fantasma atrás do texto: entra INTEIRA
     embaixo, e o herói abre espaço pra isso */
  /* no celular ela sai da sobreposição e entra no fluxo, embaixo do texto:
     sobrepor retrato e número em tela estreita só atrapalha a leitura */
  .mi-cine{min-height:auto;flex-direction:column;padding:calc(var(--e6) + 76px) 0 0}
  .mi-cine .mi-palco{order:1}
  .mi-retrato{position:static;order:2;width:100%;justify-content:center;
    margin-top:var(--e5);height:auto}
  .mi-retrato img{height:auto;width:min(80vw,420px);filter:none;
    -webkit-mask-image:linear-gradient(to bottom,#000 88%,transparent 100%);
            mask-image:linear-gradient(to bottom,#000 88%,transparent 100%)}
  .mi-cine .mi-nome,.mi-cine .mi-frase{max-width:none}
  .mi-cine .mi-numeros{grid-template-columns:1fr 1fr;gap:var(--e3)}
  .mi-faixa-foto{aspect-ratio:1.6/1}
  .mi-foto-trofeu{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .mi-retrato img,.mi-faixa-foto img{transform:none}
}

/* ============================================================
   ABERTURA EM CAMADAS — o nome passa POR TRÁS dela
   Fundo e recorte vêm do mesmo arquivo e do mesmo corte, então
   basta empilhar com object-fit igual que eles encaixam sozinhos.
   A ordem é: cena (1) · nome (2) · ela (3) · grão e vinheta (4).
   ============================================================ */
.mi-cine{display:block;padding:0;min-height:0;background:var(--verde-fundo)}
.mi-cena{
  position:relative;width:100%;aspect-ratio:16/9;max-height:92vh;overflow:hidden;
  isolation:isolate;background:#04150d;
}
.mi-camada{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:52% 42%;
  display:block;will-change:transform;
}
/* as duas camadas da foto ficam PARADAS: quem se mexe é só o nome.
   Qualquer deslocamento entre elas descola o recorte da cena. */
.mi-fundo{z-index:1}
.mi-frente{z-index:4;
  /* só o finalzinho dela dissolve, pra não terminar em corte reto */
  -webkit-mask-image:linear-gradient(to bottom,#000 88%,rgba(0,0,0,.55) 96%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 88%,rgba(0,0,0,.55) 96%,transparent 100%)}

/* o nome, entre a cena e ela */
.mi-nome-grande{
  position:absolute;z-index:3;left:0;right:0;top:clamp(92px,8.4vw,124px);margin:0;
  font-family:var(--fonte-titulo);font-weight:600;letter-spacing:-.03em;
  font-size:clamp(32px,6.6vw,104px);line-height:.94;color:#fff;text-align:center;
  text-shadow:0 10px 50px rgba(0,0,0,.45);
  transform:translate3d(var(--nx,0px),var(--ny,0px),0);
  will-change:transform;pointer-events:none;
}
.mi-nome-grande span{display:block}
.mi-nome-grande span:last-child{font-style:italic;color:#eafbe0}

/* legendas soltas dentro da cena */
.mi-trilha-cena{position:absolute;z-index:4;left:clamp(16px,4vw,48px);top:clamp(70px,8vw,96px);
  margin:0;color:#c9dccd}
.mi-trilha-cena a{color:#d9edc6}
.mi-etiqueta-cena{position:absolute;z-index:4;left:clamp(16px,4vw,48px);bottom:clamp(16px,3vw,34px);
  margin:0;color:#cfe9b6;text-shadow:0 2px 18px rgba(0,0,0,.85)}

/* grão e vinheta ficam por cima de tudo, como lente */
.mi-cena .mi-grao{z-index:6;opacity:.24}
/* o degradê que apaga a CENA no pé da foto: fica ATRÁS dela (z-index 2),
   por isso o vestido continua inteiro por cima do verde em vez de ser cortado */
.mi-cena::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(3,18,11,.45) 0%, transparent 24%, transparent 55%,
    rgba(10,61,42,.72) 84%, var(--verde-fundo) 99%);
}
/* vinheta de lente, leve, por cima de tudo menos do grão */
.mi-cena::after{
  content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  background:radial-gradient(125% 95% at 50% 42%, transparent 46%, rgba(3,18,11,.42) 100%);
}

/* o texto que vem depois da cena */
.mi-cine .mi-palco{padding:var(--e6) 0 var(--e7);transform:none}
.mi-cine .mi-frase{max-width:60ch;font-size:clamp(17px,1.6vw,22px)}

@media (max-width:900px){
  .mi-cena{aspect-ratio:4/5;max-height:78vh}
  .mi-camada{object-position:54% 36%}
  .mi-nome-grande{font-size:clamp(30px,10vw,54px);top:clamp(96px,16vw,140px)}
  .mi-cine .mi-palco{padding:var(--e5) 0 var(--e6)}
}
@media (prefers-reduced-motion:reduce){
  .mi-nome-grande{transform:none}
}

/* ============================================================
   ABERTURA QUE SE MONTA NA ROLAGEM
   A seção é alta; dentro dela a cena fica grudada na tela e os
   textos entram nos dois vazios da foto. No celular nada disso
   acontece: vira cena + textos embaixo, na ordem normal.
   ============================================================ */
.mi-cine{height:250vh;padding:0;position:relative}
.mi-cola{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden}
.mi-cine .mi-cena{position:absolute;inset:0;width:100%;height:100%;max-height:none;aspect-ratio:auto}

/* os dois blocos que entram */
.mi-entra{
  position:absolute;z-index:7;top:50%;translate:0 -50%;
  opacity:0;transform:translateY(26px);will-change:opacity,transform;
}
/* os dois blocos ficam ABAIXO da linha do nome, senão colidem com ele.
   O da esquerda foge da beirada clara da foto (cortina/parede), que comia
   a legibilidade do texto branco. */
.mi-entra-esq{left:clamp(40px,9vw,168px);width:min(30vw,360px);top:56%}
.mi-entra-dir{right:clamp(40px,8vw,140px);width:min(23vw,260px);top:60%}
/* véu atrás do texto: a foto tem flor clara do lado direito e o branco sumiria */
.mi-entra::before{
  content:"";position:absolute;inset:-26px -30px;z-index:-1;border-radius:36px;
  background:radial-gradient(ellipse at center, rgba(4,21,13,.72) 0%, rgba(4,21,13,.45) 55%, transparent 78%);
}
.mi-entra .mi-frase{color:#eaf3e8;font-size:clamp(15px,1.15vw,17.5px);line-height:1.6;max-width:none}
.mi-entra .mi-frase strong{color:#fff}
.mi-entra .mi-links{margin-top:var(--e3);padding-top:var(--e2);border-top:1px solid var(--linha);
  gap:var(--e2) var(--e3)}
.mi-entra .mi-links a{color:#eaf3e8;border-bottom-color:rgba(255,255,255,.34);font-size:13.5px}
.mi-entra .mi-numeros{display:flex;flex-direction:column;gap:var(--e3);margin:0}
/* ênfase: número grande, com filete da marca ao lado e rótulo em caixa alta */
.mi-entra .mi-num{border-left:2px solid rgba(132,192,72,.55);padding-left:16px}
.mi-entra .mi-num b{
  color:var(--verde-folha);font-size:clamp(38px,3.8vw,58px);letter-spacing:-.03em;
  text-shadow:0 6px 28px rgba(0,0,0,.55), 0 0 26px rgba(132,192,72,.25);
}
.mi-entra .mi-num span{
  color:#e4f0e2;font-size:12px;letter-spacing:.07em;text-transform:uppercase;
  font-weight:600;line-height:1.45;margin-top:6px;max-width:26ch;
}
/* véu um pouco mais forte do lado dos números: ali a foto tem flor clara */
.mi-entra-dir::before{background:radial-gradient(ellipse at center,
  rgba(4,21,13,.80) 0%, rgba(4,21,13,.55) 58%, transparent 80%)}

/* as legendas da cena sobem pro topo da tela grudada */
.mi-cine .mi-trilha-cena{z-index:8}
.mi-cine .mi-etiqueta-cena{z-index:8}

@media (max-width:900px){
  /* no celular a rolagem grudada só atrapalha: tudo volta pro fluxo */
  .mi-cine{height:auto}
  .mi-cola{position:static;height:auto;overflow:visible}
  .mi-cine .mi-cena{position:relative;aspect-ratio:4/5;height:auto;max-height:78vh}
  .mi-entra{position:static;translate:none;opacity:1;transform:none;width:auto;
    padding:var(--e5) clamp(20px,5vw,28px) 0}
  .mi-entra::before{display:none}
  .mi-entra-dir{padding-bottom:var(--e6)}
  .mi-entra .mi-numeros{display:grid;grid-template-columns:1fr 1fr;gap:var(--e4) var(--e3)}
  .mi-trilha-cena{top:clamp(88px,16vw,104px)}   /* o menu termina em ~72px */
}
@media (prefers-reduced-motion:reduce){
  .mi-cine{height:auto}
  .mi-cola{position:static;height:auto}
  .mi-cine .mi-cena{position:relative;aspect-ratio:16/9;height:auto}
  .mi-entra{position:static;translate:none;opacity:1;transform:none;width:auto;padding:var(--e5) 0 0}
  .mi-entra::before{display:none}
}

/* ============================================================
   O CÉU (02/10) — nuvem que se desfaz, céu azul, e ela
   Sem a classe .vivo (sem JS ou com "menos movimento") é um bloco
   parado: foto + texto lado a lado. Com .vivo, a cena gruda na tela
   e o michelle.js move a foto, as nuvens e os textos pela rolagem.
   Azuis tirados do topo da própria foto, pra emenda não aparecer.
   ============================================================ */
.mi-ceu{background:linear-gradient(180deg,#4c84cf 0%,#6eaaf0 100%);color:#fff;padding:var(--e7) 0}
.mi-ceu-cola{width:min(var(--largura),calc(100% - 48px));margin-inline:auto;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--e3) var(--e6);align-items:center}
.mi-ceu-foto{grid-row:1 / span 2;width:100%;height:auto;display:block;border-radius:var(--raio)}
.mi-ceu-nuvens{display:none}
.mi-ceu-etiq{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  color:#fff;margin:0 0 var(--e2);opacity:.9}
.mi-ceu-frase h2{font-size:clamp(30px,4.6vw,64px);line-height:1.04;margin:0;color:#fff;
  letter-spacing:-.02em;text-shadow:0 6px 36px rgba(20,60,120,.35)}
.mi-ceu-lado{background:rgba(255,255,255,.88);color:var(--tinta);border-radius:22px;
  padding:clamp(22px,2.6vw,34px);box-shadow:0 24px 60px rgba(14,48,92,.22)}
.mi-ceu-lado h2{font-size:clamp(24px,2.4vw,34px);line-height:1.12;margin:0 0 var(--e2);color:var(--verde-fundo)}
.mi-ceu-lado p{font-size:clamp(15px,1.15vw,17px);line-height:1.65;margin:0;color:var(--tinta)}
.mi-ceu-lado em{font-style:italic}
@media (max-width:760px){
  .mi-ceu-cola{grid-template-columns:1fr}
  .mi-ceu-foto{grid-row:auto}
}

/* ---- a versão viva ---- */
.mi-ceu.vivo{height:500vh;padding:0;background:#fff}
.mi-ceu.vivo .mi-ceu-cola{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;
  width:auto;margin:0;display:block;
  background:linear-gradient(180deg,#4a80cc 0%,#5089d4 55%,#538ad5 100%)}
.mi-ceu.vivo .mi-ceu-foto{position:absolute;left:0;top:0;max-width:none;border-radius:0;
  will-change:transform;z-index:1;
  /* a borda de cima da foto some no azul de trás: sem linha de emenda */
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 7%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 7%)}
.mi-ceu.vivo .mi-ceu-nuvens{display:block;position:absolute;inset:0;z-index:3;pointer-events:none}
.mi-ceu-nuvens canvas,.mi-ceu-veu{position:absolute;inset:0;width:100%;height:100%;
  will-change:transform,opacity}
.mi-ceu-veu{background:#fff}
.mi-ceu.vivo .mi-ceu-frase{position:absolute;z-index:4;left:0;right:0;top:30%;text-align:center;
  padding:0 24px;opacity:0;will-change:opacity,transform}
.mi-ceu.vivo .mi-ceu-frase h2{max-width:16ch;margin-inline:auto}
.mi-ceu.vivo .mi-ceu-lado{position:absolute;z-index:4;right:clamp(28px,7vw,130px);top:62%;
  width:min(36vw,440px);translate:0 -50%;opacity:0;will-change:opacity,transform}
@media (max-width:760px), (max-aspect-ratio:9/10){
  .mi-ceu.vivo{height:420vh}
  /* em pé ela fica embaixo à esquerda e o céu sobra em cima: o texto vai pro céu */
  .mi-ceu.vivo .mi-ceu-frase{top:26%}
  .mi-ceu.vivo .mi-ceu-lado{left:16px;right:16px;width:auto;top:max(88px,11vh);translate:none;
    padding:20px 22px}
  .mi-ceu.vivo .mi-ceu-lado p{font-size:15px;line-height:1.55}
}

/* ============================================================
   ABERTURA NO CELULAR (02/10) — o nome saía em cima do rosto e
   da trilha. Agora ela dissolve no verde e o nome fica no pé da
   foto, POR CIMA dela, onde a cena já é escura.
   ============================================================ */
@media (max-width:900px){
  .mi-trilha-cena{display:none}
  .mi-cine .mi-cena{aspect-ratio:auto;height:min(82svh,640px);max-height:none}
  .mi-camada{object-position:55% 30%}
  .mi-frente{
    -webkit-mask-image:linear-gradient(to bottom,#000 58%,rgba(0,0,0,.35) 80%,transparent 94%);
            mask-image:linear-gradient(to bottom,#000 58%,rgba(0,0,0,.35) 80%,transparent 94%)}
  .mi-cena::before{background:linear-gradient(to bottom,
    rgba(3,18,11,.5) 0%,transparent 22%,transparent 48%,rgba(10,61,42,.8) 76%,var(--verde-fundo) 96%)}
  .mi-nome-grande{z-index:7;top:auto;bottom:22px;left:20px;right:20px;text-align:left;
    font-size:clamp(34px,10.4vw,52px);line-height:.98;text-shadow:0 4px 30px rgba(0,0,0,.55)}
  .mi-cine .mi-etiqueta-cena{position:static;display:block;padding:var(--e4) 20px 0;text-shadow:none}
  .mi-cine .mi-entra-esq{padding-top:var(--e3)}
}