/* =====================================================================
   Caso · molde único dos 4 casos
   Abertura com número herói e botão · ficha · 01 O desafio · 02 O que a gente fez
   (momento em Noite + itens em Papel com índice preso no computador) · 03 Os números
   (projeção só aqui, em painel de contorno, menor que o real) · próximo caso com barra.
   Usa só tokens do base.css; nada aqui mexe em base/telas.
   ===================================================================== */

/* ---------- capítulos: numeral grande e filete, como página de revista ---------- */
.caso .capitulo-abre{
  display:flex;align-items:baseline;gap:var(--e4);
  padding-top:var(--e3);border-top:1px solid var(--linha-forte);
  margin-bottom:var(--e5);
}
.capitulo-num{
  font-size:clamp(2.25rem, 1rem + 5.2vw, 5.5rem);font-weight:300;letter-spacing:-.06em;line-height:.8;
  color:var(--texto);font-variant-numeric:tabular-nums;
}
.capitulo-nome{text-transform:uppercase;letter-spacing:.02em;color:var(--apoio)}
@media (min-width:1024px){
  .caso .capitulo-abre{padding-top:var(--e4);margin-bottom:var(--e8)}
  .capitulo-nome{margin-left:auto}
}

/* ---------- cabeçalho: o filete vira 3 segmentos (O desafio · O que a gente fez · O resultado) ---------- */
.cabecalho--caso .cabecalho-progresso{transform:none;background:none;display:flex;gap:4px}
.cabecalho--caso .cabecalho-progresso>i{flex:1;height:100%;border-radius:2px;background:var(--linha-forte);overflow:hidden}
.cabecalho--caso .cabecalho-progresso>i::after{
  content:"";display:block;height:100%;background:var(--acento);
  transform-origin:0 50%;transform:scaleX(var(--s,0));
}

/* =====================================================================
   1. ABERTURA
   ===================================================================== */
.caso-abertura{padding-top:calc(var(--cabecalho-altura) + var(--e2));padding-bottom:var(--e5);overflow:clip}
.abertura-grade{display:grid;gap:var(--e5)}
.abertura-texto{display:flex;flex-direction:column;gap:var(--e4)}
.abertura-topo{display:flex;flex-direction:column;gap:var(--e2)}
.abertura-nome{font-size:var(--t-titulo);letter-spacing:-.038em;line-height:1.02;max-width:13ch}
.abertura-apoio{font-size:var(--t-texto);color:var(--apoio);max-width:32ch;line-height:1.35;margin-top:var(--e1)}
/* o @ do perfil vira link discreto pro Instagram (nova aba, fora da cortina) */
.abertura-perfil{color:var(--texto);text-decoration:underline;text-decoration-color:var(--apoio);text-decoration-thickness:1px;text-underline-offset:.22em;transition:color var(--d-ui),text-decoration-color var(--d-ui)}
@media (hover:hover) and (pointer:fine){ .abertura-perfil:hover{color:var(--acento);text-decoration-color:currentColor} }
.heroi-caso .numero-linha{
  font-size:clamp(4.75rem, 1.8rem + 13.2vw, min(11.5rem, 21vh));letter-spacing:-.055em;line-height:.9;
}
.heroi-caso .numero-sinal{margin-right:.04em}
.heroi-caso .numero-legenda{font-size:var(--t-destaque);font-weight:500;letter-spacing:-.02em;color:var(--apoio);margin-top:var(--e2);max-width:24ch;line-height:1.2}
.abertura-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--e5);margin-top:var(--e1)}
.abertura-acoes .link-seta{margin-top:0}

/* a capa (alvo da capa que voa do cartão em Trabalhos) */
.abertura-capa{
  --proporcao:auto;
  position:relative;height:var(--capa-h, 206px);
  background:var(--painel-fundo);border:1px solid var(--painel-borda);
  border-radius:var(--r-painel);overflow:hidden;
}
.caso--dermatologista .abertura-capa{--capa-h:262px}
.caso--levany .abertura-capa{--capa-h:290px}
.caso--rogge .abertura-capa{--capa-h:270px}

@media (min-width:1024px){
  .caso-abertura{min-height:100vh;display:flex;padding-top:calc(var(--cabecalho-altura) + var(--e4));padding-bottom:var(--e7)}
  .abertura-grade{grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:stretch;width:100%}
  .abertura-texto{grid-column:1 / 8;justify-content:center;gap:var(--e6);padding-block:var(--e5)}
  .abertura-topo{gap:var(--e4)}
  .abertura-nome{max-width:none}
  .abertura-acoes{gap:var(--e3) var(--e6)}
  .abertura-capa{
    grid-column:8 / 13;height:auto;min-height:540px;
    margin-right:calc(-1 * var(--margem));
    border-top-right-radius:0;border-bottom-right-radius:0;border-right:0;
  }
}

/* ---------- capas desenhadas (abertura e próximo caso usam a mesma) ---------- */
.capa{position:absolute;inset:0}

/* advogada (Noite): 192 pontos + o Google com o anúncio */
.capa--advogada .capa-pontos{position:absolute;left:18px;top:18px;display:flex;flex-direction:column;gap:10px}
.capa-grade{--cp:8px;display:grid;grid-template-columns:repeat(16, var(--cp));grid-auto-rows:var(--cp)}
.capa-grade i{width:calc(var(--cp) * .46);height:calc(var(--cp) * .46);border-radius:50%;background:var(--menta);opacity:.92;align-self:center;justify-self:center}
.capa-legenda{font-family:var(--fonte-mono);font-size:12px;font-weight:500;letter-spacing:.02em;text-transform:uppercase;color:var(--cinza)}
.capa--advogada .capa-fone{position:absolute;right:14px;top:18px;--iphone-w:var(--capa-fone, 176px)}
/* acende em onda, da esquerda pra direita, quando a página fica pronta */
html.js:not(.reduzido) .capa--advogada .capa-grade i{opacity:.18;transition:opacity .5s var(--ease-entra)}
html.js:not(.reduzido) .capa.capa-viva .capa-grade i{opacity:.92}
.capa-grade i:nth-child(16n+1){transition-delay:0ms}.capa-grade i:nth-child(16n+2){transition-delay:40ms}.capa-grade i:nth-child(16n+3){transition-delay:80ms}.capa-grade i:nth-child(16n+4){transition-delay:120ms}
.capa-grade i:nth-child(16n+5){transition-delay:160ms}.capa-grade i:nth-child(16n+6){transition-delay:200ms}.capa-grade i:nth-child(16n+7){transition-delay:240ms}.capa-grade i:nth-child(16n+8){transition-delay:280ms}
.capa-grade i:nth-child(16n+9){transition-delay:320ms}.capa-grade i:nth-child(16n+10){transition-delay:360ms}.capa-grade i:nth-child(16n+11){transition-delay:400ms}.capa-grade i:nth-child(16n+12){transition-delay:440ms}
.capa-grade i:nth-child(16n+13){transition-delay:480ms}.capa-grade i:nth-child(16n+14){transition-delay:520ms}.capa-grade i:nth-child(16n+15){transition-delay:560ms}.capa-grade i:nth-child(16n+16){transition-delay:600ms}

/* dermatologista (Papel): a agenda atrás, o WhatsApp da clínica na frente */
.capa--derma .capa-agenda{position:absolute;left:16px;top:18px;width:46%;box-shadow:none}
.capa--derma .capa-agenda .tela-janela{width:100%;aspect-ratio:393/600}
.capa--derma .capa-fone{position:absolute;right:16px;top:var(--capa-fone-top, -168px);--iphone-w:var(--capa-fone, 196px)}

/* Levany (Papel): a foto grande sangrando à direita e o leque de carrosséis */
.capa--levany .capa-foto{position:absolute;right:0;top:0;bottom:0;width:62%}
.capa--levany .capa-foto img{width:100%;height:100%;object-fit:cover;object-position:52% 18%}
.capa-leque{position:absolute;left:14px;top:var(--leque-top, 22px);width:var(--leque-w, 50%);aspect-ratio:1.18}
.capa-car{position:absolute;width:62%;bottom:0;box-shadow:0 10px 30px rgba(17,17,19,.14);transition:transform 1.1s var(--ease-entra)}
.capa-car img{width:100%;aspect-ratio:4/5;object-fit:cover}
.capa-car--1{left:0;transform:rotate(-7deg) translate(-2%,-4%)}
.capa-car--2{left:19%;transform:rotate(0deg) translateY(-8%);z-index:2}
.capa-car--3{left:38%;transform:rotate(7deg) translate(2%,-2%);z-index:3}
html.js:not(.reduzido) .capa--levany:not(.capa-viva) .capa-car{transform:rotate(0) translate(0,6%)}

/* Rogge do Vlog (Noite): o print de 5,7 milhões na frente, 164 mil e 107 mil atrás */
.capa--rogge .capa-print{position:absolute;left:50%;top:50%;width:var(--print-w, 138px);box-shadow:0 18px 50px rgba(0,0,0,.5);transition:transform 1.1s var(--ease-entra)}
.capa--rogge .capa-print .janela-barra{height:22px;padding:0 10px}
.capa--rogge .capa-print img{width:100%;aspect-ratio:281/437;object-fit:cover}
.capa-print--frente{transform:translate(-50%,-50%);z-index:3;--print-w:var(--print-frente, 164px)}
.capa-print--esq{transform:translate(-112%,-46%) rotate(-8deg);opacity:.9}
.capa-print--dir{transform:translate(12%,-46%) rotate(8deg);opacity:.9}
html.js:not(.reduzido) .capa--rogge:not(.capa-viva) .capa-print--esq,
html.js:not(.reduzido) .capa--rogge:not(.capa-viva) .capa-print--dir{transform:translate(-50%,-48%) rotate(0)}

@media (max-width:359px){ .abertura-capa{--capa-fone:156px} }
@media (min-width:1024px){
  .abertura-capa .capa--advogada .capa-pontos{left:36px;top:36px}
  .abertura-capa .capa-grade{--cp:13px}
  .abertura-capa .capa--advogada .capa-fone{right:28px;top:auto;bottom:-20%;--iphone-w:clamp(240px, 19vw, 300px)}
  .abertura-capa .capa--derma .capa-agenda{left:40px;top:48px;width:44%}
  .abertura-capa .capa--derma .capa-fone{right:48px;top:auto;bottom:-14%;--iphone-w:clamp(270px, 21vw, 310px)}
  .abertura-capa .capa--levany .capa-foto{width:74%}
  .abertura-capa .capa-leque{left:36px;top:auto;bottom:40px;width:46%}
  .abertura-capa .capa--rogge{--print-w:clamp(170px, 14vw, 210px);--print-frente:clamp(220px, 19vw, 280px)}
}

/* =====================================================================
   2. FICHA (Papel): 4 linhas com filete no celular, em colunas no computador
   ===================================================================== */
.caso-ficha{padding-block:var(--e5)}
.ficha{margin:0}
.ficha-linha{display:grid;grid-template-columns:112px 1fr;gap:var(--e4);padding:9px 0;border-top:1px solid var(--linha)}
.ficha-linha:last-child{border-bottom:1px solid var(--linha)}
.ficha dt{text-wrap:balance;color:var(--apoio);text-transform:uppercase;letter-spacing:.02em;font-size:12px;padding-top:3px;line-height:1.3}
.ficha dd{margin:0;font-size:var(--t-texto);font-weight:500;line-height:1.35;letter-spacing:-.01em}
@media (min-width:600px){ .ficha-linha{grid-template-columns:200px 1fr} .ficha dt{font-size:var(--t-mono)} }
@media (min-width:1024px){
  .caso-ficha{padding-block:var(--e8)}
  .ficha{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);border-top:1px solid var(--linha-forte)}
  .ficha--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ficha-linha{grid-template-columns:none;align-content:start;gap:var(--e4);padding:var(--e5) var(--e5) 0 0;border:0}
  .ficha-linha:last-child{border:0}
  .ficha dd{font-size:clamp(1.25rem, .9rem + .6vw, 1.5rem);letter-spacing:-.02em;line-height:1.25;max-width:20ch}
}

/* =====================================================================
   3. O DESAFIO (Papel)
   ===================================================================== */
.caso-desafio{padding-top:var(--e2)}
.desafio-corpo{display:grid;gap:var(--e5)}
.desafio-titulo{max-width:16ch}
.desafio-frase{max-width:30ch}
@media (min-width:1024px){
  .caso-desafio{padding-top:0}
  .desafio-corpo{grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:end}
  .desafio-titulo{grid-column:1 / 8;max-width:15ch}
  .desafio-frase{grid-column:8 / 13;max-width:none}
}

/* =====================================================================
   4. O QUE A GENTE FEZ · o momento do caso (Noite)
   ===================================================================== */
.caso-fez{padding-bottom:var(--secao)}
.fez-titulo{max-width:16ch}
.fez-intro{margin-bottom:var(--e7)}
@media (min-width:1024px){ .fez-titulo{max-width:18ch} .fez-intro{margin-bottom:var(--e9)} }

.item-rotulo{gap:10px}
.momento-h3{font-size:var(--t-destaque);max-width:22ch}
.momento-apoio{font-size:var(--t-texto);color:var(--apoio);max-width:34ch;line-height:1.4}
.momento-legenda{color:var(--apoio);text-transform:uppercase;letter-spacing:.02em;font-size:12px}

/* --- advogada: os 192 pontos, pista presa curta, acendem logo que aparecem --- */
.caso-fez--pontos{padding-bottom:0}
.caso-fez--pontos .fez-intro{margin-bottom:0}
.momento{position:relative;height:calc(var(--palco-h) + 22svh);--palco-h:min(100svh, calc(var(--cabecalho-altura) + 200px + (100vw - 2 * var(--margem)) * .75 + 48px))}
.momento-palco{
  position:sticky;top:0;height:var(--palco-h);
  display:flex;align-items:flex-start;
  padding-top:calc(var(--cabecalho-altura) - 4px);padding-bottom:var(--e4);
}
.momento-grade{display:flex;flex-direction:column;gap:var(--e4);width:100%}
.momento-texto{display:flex;flex-direction:column;gap:var(--e3)}
.momento-numero{flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:0 var(--e3)}
.momento-numero .numero-linha{font-size:clamp(3.5rem, 1.8rem + 7vw, 10rem);letter-spacing:-.055em;line-height:.9;color:var(--menta)}
.momento-numero .numero-legenda{margin-top:0;font-size:var(--t-texto);max-width:15ch;color:var(--claro);font-weight:600;letter-spacing:-.015em;line-height:1.25}
.momento-texto .momento-apoio{display:none}
.momento-figura{margin:0;display:flex;flex-direction:column;align-items:center;gap:var(--e3)}
.pontos{
  --cols:16;
  --passo:calc((100vw - 2 * var(--margem)) / 16);
  --n:192;
  display:grid;grid-template-columns:repeat(var(--cols), var(--passo));grid-auto-rows:var(--passo);
  width:max-content;
}
html.js .pontos{--n:14}
html.reduzido .pontos{--n:192!important}
.pontos i{
  --on:clamp(0, calc(var(--n) - var(--o)), 1);
  position:relative;justify-self:center;align-self:center;
  width:calc(var(--passo) * .38);height:calc(var(--passo) * .38);border-radius:50%;
  background:#4A4B52;
}
.pontos i::after{
  content:"";position:absolute;inset:0;border-radius:50%;background:var(--menta);
  opacity:var(--on);transform:scale(calc(.25 + var(--on) * .75));
}
@media (min-width:1024px){
  .momento{--palco-h:100vh;height:calc(100vh + 70vh)}
  .momento-palco{height:100vh;padding-bottom:var(--e6);align-items:center}
  .momento-grade{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:center}
  .momento-texto{grid-column:1 / 5;gap:var(--e5)}
  .momento-numero{flex-direction:column;align-items:flex-start;gap:var(--e4)}
  .momento-numero .numero-legenda{font-size:var(--t-destaque);max-width:12em}
  .momento-texto .momento-apoio{display:block;max-width:28ch}
  .momento-figura{grid-column:5 / 13;justify-self:end;align-items:flex-start}
  .pontos{--cols:16;--passo:min(46px, calc((100vh - 290px) / 12))}
  .momento-legenda{font-size:var(--t-mono)}
}
html.reduzido .momento{height:auto}
html.reduzido .momento-palco{position:static;height:auto;padding-block:var(--e8)}

/* --- momentos soltos (dermatologista, Levany, Rogge) --- */
.momento-solto{display:grid;gap:var(--e6)}
.recepcao-texto,.carrosseis-texto,.parede-texto{display:flex;flex-direction:column;align-items:flex-start;gap:var(--e3)}

/* dermatologista: a recepção (V2) */
.recepcao-lista{display:flex;flex-direction:column;margin-top:var(--e3);width:100%;max-width:34ch}
.recepcao-lista li{display:flex;gap:var(--e3);align-items:baseline;padding:12px 0;border-top:1px solid var(--linha);font-size:var(--t-texto);font-weight:500;line-height:1.35}
.recepcao-lista li:last-child{border-bottom:1px solid var(--linha)}
.recepcao-marca{flex:none;width:8px;height:8px;border-radius:50%;background:var(--acento);transform:translateY(-2px)}
.recepcao-loop{max-width:440px;width:100%}
@media (min-width:1024px){
  .momento-recepcao{grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:center}
  .recepcao-texto{grid-column:1 / 6}
  .recepcao-loop{grid-column:7 / 13;max-width:min(560px, calc((100vh - 180px) * .8));justify-self:end}
}

/* Levany: os 5 carrosséis aprovados (toque passa o slide) */
.carrosseis-faixa{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-top:var(--e6);padding-bottom:var(--e2)}
.carrosseis-faixa::-webkit-scrollbar{display:none}
.carrosseis{display:flex;gap:var(--e4);padding-inline:var(--margem);width:max-content;margin-inline:auto}
.car{width:min(66vw, 260px);flex:none;scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--e3)}
.car-janela{width:100%;padding:0;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.car-janela .janela-barra{position:relative}
.car-conta{margin-left:auto;font-family:var(--fonte-mono);font-size:11px;font-weight:500;color:var(--apoio);font-variant-numeric:tabular-nums}
.car-slides{position:relative;display:block;width:100%;aspect-ratio:4/5;overflow:hidden;background:#fff}
.car-slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:translateX(6%);transition:opacity .45s var(--ease-entra),transform .6s var(--ease-entra)}
.car-slides img.atual{opacity:1;transform:none}
.car-slides img.saindo{opacity:0;transform:translateX(-6%)}
.car-pontos{display:flex;gap:6px}
.car-pontos i{width:6px;height:6px;border-radius:50%;background:var(--apagado-atual);transition:background-color .3s}
.car-pontos i.on{background:var(--acento)}
@media (hover:hover) and (pointer:fine){ .car-janela:hover{border-color:var(--cinza)} }
.carrosseis-legenda{margin-top:var(--e4);text-align:center}
@media (min-width:1024px){
  .momento-carrosseis{grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:end}
  .carrosseis-texto{grid-column:1 / 8}
  .carrosseis-faixa{overflow:visible;margin-top:var(--e8)}
  .carrosseis{width:100%;max-width:calc(var(--largura) + 2 * var(--margem));justify-content:space-between;gap:var(--gap)}
  .car{width:auto;flex:1 1 0}
  .carrosseis-legenda{text-align:left}
}

/* Rogge: a parede com os 4 prints reais */
.parede{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e5) var(--e3);align-items:end}
.parede .viral{width:100%;--viral-largura:auto}
.parede-item--grande{grid-column:1 / -1;justify-self:center;width:min(62vw, 240px)!important}
.parede .viral .numero-linha{font-size:clamp(1.25rem, 1rem + 1vw, 2.25rem)}
.parede .viral .numero-legenda{font-size:13px}
.parede-item--grande .numero-linha{font-size:clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem)!important}
.parede-item--grande .numero-legenda{font-size:15px!important}
.parede .viral figcaption{margin-top:var(--e3)}
@media (min-width:1024px){
  .momento-parede{grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:center}
  .parede-texto{grid-column:1 / 5}
  .parede{grid-column:5 / 13;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:var(--gap);align-items:end}
  .parede-item--grande{grid-column:auto;width:100%!important}
}

/* =====================================================================
   5. ITENS (Papel) com o índice preso no computador
   ===================================================================== */
.caso-itens{padding-top:var(--e7);padding-bottom:var(--e7)}
.itens{display:flex;flex-direction:column;gap:var(--e7)}
.item-ancora{display:block;height:0}
.item{display:grid;gap:var(--e4);align-items:center}
.item-visual{margin:0;display:flex;flex-direction:column;gap:var(--e3);min-width:0}
.item-texto{display:flex;flex-direction:column;align-items:flex-start;gap:var(--e3);min-width:0}
.item-texto h3{max-width:20ch}
.item-num{display:none;font-size:clamp(2.75rem, 1.6rem + 4.9vw, 5rem);font-weight:300;letter-spacing:-.06em;line-height:.85;color:var(--texto);font-variant-numeric:tabular-nums}
.item-legenda{color:var(--apoio);text-transform:uppercase;letter-spacing:.02em;font-size:12px}
.item-texto .link-seta{margin-top:var(--e1)}

/* painel com o celular inteiro (nada cortado: o Reels mostra a interface completa) */
.painel-visual .item-fone{
  position:relative;display:flex;justify-content:center;align-items:center;
  padding:var(--fone-pad, 14px);
  background:var(--painel);border:1px solid var(--filete);border-radius:var(--r-painel);
}
.painel-visual--noite .item-fone{background:var(--noite);border-color:var(--noite)}
.item-fone .iphone{--iphone-w:var(--fone-w, 140px)}
.item-foto picture,.item-foto img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:66% 28%;border-radius:var(--r-painel)}

/* celular: visual e texto lado a lado (página curta), trocando de lado */
@media (max-width:1023px){
  .item{grid-template-columns:auto minmax(0,1fr);gap:var(--e4)}
  .item--inverso{grid-template-columns:minmax(0,1fr) auto}
  .item--inverso .item-visual{order:2}
  .item .item-legenda{display:none}
  .item-texto h3{font-size:clamp(1.125rem, .95rem + .9vw, 1.375rem);line-height:1.18}
  .item-texto .texto-apoio{font-size:15px;line-height:1.4}
  .item:not(.item--largo):not(.item--texto) .item-rotulo{font-size:12px}
  .painel-visual{--fone-pad:12px;--fone-w:132px}
  .item-foto{width:150px}
  .item--largo,.item--texto,.item--empilha{grid-template-columns:minmax(0,1fr)}
  .item--empilha .item-visual{order:2}
  .item--empilha .item-fone{padding-block:18px}
  .item--texto{padding-top:var(--e4);border-top:1px solid var(--linha)}
  .item--texto .item-texto h3{max-width:24ch}
}
@media (max-width:359px){ .painel-visual{--fone-w:132px} .item-foto{width:132px} }

/* advogada, item Google: a busca com o anúncio + o vídeo do perfil (V3) */
.item--largo .item-visual{order:2}
.google-par{display:flex;gap:var(--e3);overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  margin-inline:calc(-1 * var(--margem));padding-inline:var(--margem);scroll-padding-inline:var(--margem);padding-bottom:var(--e2)}
.google-par::-webkit-scrollbar{display:none}
.google-par>*{flex:0 0 84%;scroll-snap-align:start;min-width:0;margin:0}
.google-busca{display:flex;flex-direction:column;gap:var(--e3)}
@media (max-width:1023px){ .google-busca .janela-busca{max-height:min(372px, 100vw);-webkit-mask-image:linear-gradient(#000 82%, transparent);mask-image:linear-gradient(#000 82%, transparent)} }
.google-busca .item-legenda{display:block}
.google-loop figcaption{font-size:12px}

@media (min-width:1024px){
  .caso-itens{padding-top:var(--secao);padding-bottom:var(--secao)}
  .itens-grade{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:start}
  .itens{grid-column:4 / 13;gap:clamp(var(--e9), 9vw, var(--e10))}
  .item{grid-template-columns:repeat(9,minmax(0,1fr));gap:var(--gap)}
  .item-visual{grid-column:1 / 6}
  .item-texto{grid-column:6 / 10;padding-left:var(--e5)}
  .item--inverso .item-visual{grid-column:5 / 10;order:2}
  .item--inverso .item-texto{grid-column:1 / 5;order:1;padding-left:0;padding-right:var(--e5)}
  .item-num{display:block;margin-bottom:var(--e3)}
  .item .rot-num{display:none}
  .item-texto h3{font-size:clamp(1.75rem, 1rem + 1.2vw, 2.25rem);letter-spacing:-.035em;line-height:1.08;max-width:17ch}
  .item-texto .texto-apoio{max-width:28ch}
  .item-legenda{font-size:var(--t-mono)}
  .painel-visual{--fone-pad:48px;--fone-w:clamp(230px, 17vw, 270px)}
  .item--largo .item-texto{grid-column:1 / 10;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:var(--e3) var(--gap);align-items:end}
  .item--largo .item-texto>*{grid-column:1 / 6}
  .item--largo .item-texto .texto-apoio{grid-column:6 / 10;grid-row:3 / 5;align-self:end;margin-bottom:.35em}
  .item--largo .item-texto h3{max-width:none}
  .item--largo .item-visual{grid-column:1 / 10}
  .google-par{display:grid;grid-template-columns:5fr 4fr;gap:var(--gap);overflow:visible;margin:0;padding:0;align-items:start}
  .google-par>*{flex:none}
  .item--texto{grid-template-columns:repeat(9,minmax(0,1fr));padding-top:var(--e5);border-top:1px solid var(--linha)}
  .item--texto .item-texto{grid-column:1 / 10;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:var(--e3) var(--gap);align-items:start}
  .item--texto .item-num{grid-column:1 / 3;grid-row:1 / 4;margin:0}
  .item--texto .item-texto>:not(.item-num){grid-column:3 / 8}
  .item--texto .item-texto h3{max-width:22ch}
  .caso-itens--levany .itens{gap:var(--e7)}
}

/* índice preso (computador): capítulos e os itens do 02 com o marcador de etapa enchendo */
.indice{grid-column:1 / 4;align-self:stretch}
.indice-fixo{position:sticky;top:calc(var(--cabecalho-altura) + var(--e6));display:flex;flex-direction:column;gap:var(--e3);padding-top:var(--e4);border-top:1px solid var(--linha-forte)}
.indice-cap{display:flex;gap:var(--e3);align-items:baseline;min-height:36px;font-weight:600;font-size:17px;letter-spacing:-.01em;text-decoration:none;color:var(--apoio);transition:color var(--d-ui)}
.indice-cap--atual{color:var(--texto)}
.indice-num{font-family:var(--fonte-mono);font-size:13px;font-weight:500;color:var(--apoio);min-width:2ch;font-variant-numeric:tabular-nums}
.indice-itens{display:flex;flex-direction:column;gap:2px;margin:0 0 var(--e2) 0;padding:0 0 0 calc(2ch + var(--e3))}
.indice-item{display:flex;align-items:center;gap:10px;min-height:36px;font-size:15px;font-weight:500;text-decoration:none;color:var(--apoio);transition:color var(--d-ui)}
.indice-item .etapa{width:18px;height:18px;color:var(--apoio);transition:color var(--d-ui)}
.indice-item.feito .etapa{color:var(--acento)}
.indice-item.atual{color:var(--texto)}
.indice-item.atual .etapa{color:var(--acento)}
@media (hover:hover) and (pointer:fine){ .indice-cap:hover,.indice-item:hover{color:var(--texto)} }

/* =====================================================================
   6. OS NÚMEROS (Noite): o resultado real manda; projeção à parte, menor, com contorno
   ===================================================================== */
.numeros-titulo{max-width:15ch;margin-bottom:var(--e7)}
.numeros-grade{display:grid;gap:var(--e6)}
.num-heroi .numero-linha{font-size:var(--t-gigante)}
.num-heroi .numero-sinal{color:var(--menta)}
.num-heroi .numero-legenda{font-size:var(--t-destaque);font-weight:500;letter-spacing:-.02em;line-height:1.2;max-width:22ch}
.num-lado{display:flex;flex-direction:column;gap:var(--e6)}
.num-apoio{padding-top:var(--e4);border-top:1px solid var(--linha)}
.num-apoio .numero-legenda,.num-par .numero-legenda{font-size:17px;max-width:24ch}
.num-projecao{padding:16px 20px 18px;align-self:flex-start}
.num-projecao .numero-linha{font-size:clamp(2rem, 1.6rem + 1.6vw, 3rem);letter-spacing:-.04em}
.num-projecao .rotulo{margin-bottom:var(--e3)}
.num-projecao .numero-legenda{margin-top:6px;font-size:16px}
.num-par{display:grid;grid-template-columns:1fr 1fr;gap:var(--e4);margin-top:var(--e6);padding-top:var(--e4);border-top:1px solid var(--linha)}
.num-par .numero-linha{font-size:clamp(2rem, 1.5rem + 2vw, 3.5rem)}
.num-prints{display:flex;gap:var(--e4)}
.num-prints .viral{--viral-largura:calc((100% - var(--e4)) / 2)}
.num-prints .viral .numero-linha{font-size:clamp(1.5rem, 1.2rem + 1vw, 2.25rem)}
.num-linha-apoio{color:var(--apoio);text-transform:uppercase;letter-spacing:.02em;font-size:12px;line-height:1.6;max-width:62ch}
@media (min-width:1024px){
  .numeros-titulo{max-width:none;margin-bottom:var(--e9)}
  .numeros-grade{grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--e8) var(--gap);align-items:start}
  .num-principal{grid-column:1 / 8}
  .num-principal--largo{grid-column:1 / 13}
  .num-lado{grid-column:9 / 13;gap:var(--e7)}
  .num-projecao{padding:28px 32px}
  .num-linha-apoio{grid-column:1 / 13;font-size:var(--t-mono)}
  .num-lado--dois{padding-top:var(--e4)}
  .caso-numeros--levany .num-lado{grid-column:8 / 13}
  .num-prints .viral{--viral-largura:calc((100% - var(--e4)) / 2)}
}

/* =====================================================================
   7. PRÓXIMO CASO: barra visível, "Continue rolando" e "Abrir agora" na mesma linha
   ===================================================================== */
.proximo{position:relative;height:calc(100svh + 20svh);background:var(--fundo)}
.proximo-palco{position:sticky;top:0;height:100svh;overflow:clip;padding:calc(var(--cabecalho-altura) + var(--e3)) 0 var(--e4);display:flex;border-top:1px solid var(--linha)}
.proximo-grade{display:flex;flex-direction:column;width:100%;gap:var(--e4);min-height:0}
.proximo-texto{display:flex;flex-direction:column;gap:var(--e3);position:relative;z-index:2}
.proximo-nome{font-size:clamp(2.5rem, 1.2rem + 4.6vw, 6rem);letter-spacing:-.05em;line-height:.95;max-width:12ch}
.proximo-nome a{text-decoration:none;color:inherit}
.proximo-resultado{font-size:var(--t-texto);font-weight:500;letter-spacing:-.015em;color:var(--apoio);max-width:26ch;line-height:1.35}
.proximo-guia{display:flex;flex-direction:column;gap:4px;margin-top:var(--e2)}
.proximo-linha{display:flex;justify-content:space-between;align-items:center;gap:var(--e4)}
.proximo-dica{color:var(--texto);text-transform:uppercase;letter-spacing:.04em;font-size:12px;font-weight:600}
.proximo-abrir{min-height:44px;padding-left:var(--e3)}
.proximo-barra{height:3px;background:var(--linha-forte);border-radius:3px;overflow:hidden}
.proximo-barra i{display:block;height:100%;background:var(--texto);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.proximo-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--e4)}
.proximo-acoes .botao{display:none}
.proximo-acoes .link-seta{margin-top:0}
.proximo-capa{position:relative;flex:1;min-height:150px;display:block;text-decoration:none}
.proximo-capa-caixa{
  position:absolute;inset:0;overflow:hidden;
  background:var(--painel-fundo);border:1px solid var(--painel-borda);border-radius:var(--r-painel);
  transform:translateY(calc((1 - var(--p,0)) * 42%));
}
.proximo--advogada .proximo-capa-caixa{--capa-fone:160px}
.proximo--dermatologista .proximo-capa-caixa{--capa-fone:184px;--capa-fone-top:-196px}
.proximo--levany .proximo-capa-caixa{--leque-w:52%}
.proximo--rogge .proximo-capa-caixa{--print-w:110px;--print-frente:132px}
html.reduzido .proximo{height:auto}
html.reduzido .proximo-palco{position:static;height:auto;min-height:100svh}
html.reduzido .proximo-capa{min-height:300px}
@media (max-width:1023px){
  /* o botão fixo cobre o pé: a capa termina acima dele */
  .proximo-palco{padding-bottom:calc(var(--e4) + 72px)}
  .proximo-acoes .link-seta{font-size:15px}
}
@media (min-width:1024px){
  .proximo{height:calc(100vh + 56vh)}
  .proximo-palco{height:100vh;padding-bottom:0}
  .proximo-grade{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:stretch}
  .proximo-texto{grid-column:1 / 7;padding-top:var(--e8);gap:var(--e4)}
  .proximo-dica{font-size:var(--t-mono)}
  .proximo-guia{margin-top:var(--e5);max-width:520px}
  .proximo-acoes{gap:var(--e3) var(--e6);margin-top:var(--e5)}
  .proximo-acoes .botao{display:inline-flex}
  .proximo-capa{grid-column:7 / 13;margin-top:var(--e8);margin-right:calc(-1 * var(--margem))}
  .proximo-capa-caixa{border-bottom-left-radius:0;border-bottom-right-radius:0;border-right:0;border-bottom:0;border-top-right-radius:0}
  .proximo--advogada .proximo-capa-caixa{--capa-fone:250px}
  .proximo--advogada .capa-grade{--cp:13px}
  .proximo--dermatologista .proximo-capa-caixa{--capa-fone:280px;--capa-fone-top:44px}
  .proximo--dermatologista .capa--derma .capa-fone{right:56px}
  .proximo--dermatologista .capa--derma .capa-agenda{left:32px;top:72px;width:42%}
  .proximo--levany .capa--levany .capa-foto{width:70%}
  .proximo--levany .capa-leque{left:32px;top:auto;bottom:44px;width:46%}
  .proximo--rogge .proximo-capa-caixa{--print-w:180px;--print-frente:230px}
  .proximo--rogge .capa--rogge .capa-print{top:46%}
  @media (hover:hover) and (pointer:fine){ .proximo-nome a:hover{color:var(--acento)} }
}

/* =====================================================================
   8. Celular: menos respiro onde o tom não muda (meta de telas)
   ===================================================================== */
@media (max-width:1023px){
  .caso .capitulo-abre{margin-bottom:var(--e4)}
  .caso-fez{padding-top:var(--e8)}
  .caso-numeros{padding-top:var(--e7)}
  .caso-numeros.reserva-botao{padding-bottom:calc(var(--e7) + var(--reserva-fixo))}
  .caso-desafio{padding-bottom:var(--e7)}
  .itens{gap:var(--e6)}
  .caso-itens{padding-top:var(--e6)}
  .num-apoio .numero,.num-par .numero{flex-direction:row;align-items:baseline;gap:var(--e4)}
  .num-apoio .numero-legenda,.num-par .numero-legenda{margin-top:0;font-size:16px}
  .num-par{grid-template-columns:1fr;gap:var(--e4)}
  .num-par .numero-linha,.num-apoio .numero-linha{flex:none}
  .numeros-grade{gap:var(--e5)}
  .caso-numeros .capitulo-abre{margin-bottom:var(--e4)}
  .numeros-titulo{margin-bottom:var(--e6)}
}
@media (max-width:359px){
  .desafio-titulo,.fez-titulo,.numeros-titulo{font-size:1.75rem}
  .acende.desafio-frase{font-size:1.25rem}
}

/* =====================================================================
   V2 e V3 dentro do iPhone desenhado,
   o mesmo aparelho do Início (0,482, ilha e barra de início), e itens empilhados no celular.
   ===================================================================== */
/* dermatologista, 01: o V2 (recepcao-tela) no iPhone, com a conversa da clínica de reserva e o selo por cima */
.recepcao-fone{margin:0 0 56px;display:flex;flex-direction:column;align-items:center;gap:var(--e4);--iphone-w:min(62vw, 250px);max-width:none}
.recepcao-fone .recepcao-legenda{order:-1;align-self:stretch;text-align:center;font-size:12px;color:var(--apoio);text-transform:uppercase;letter-spacing:.02em}
@media (min-width:1024px){
  .recepcao-fone{--iphone-w:clamp(260px, calc((100vh - 240px) * .482), 320px);justify-self:center;max-width:none}
  .recepcao-fone .recepcao-legenda{text-align:center}
}
/* advogada, 02: o V3 (google-tela) no iPhone ao lado da janela da busca */
.google-fone{display:flex;flex-direction:column;gap:var(--e3);margin:0}
.google-fone-caixa{display:flex;justify-content:center;padding:var(--e2) 0 60px;--iphone-w:min(50vw, 210px)}
.google-fone .item-legenda{display:block}
@media (min-width:1024px){ .google-fone-caixa{--iphone-w:clamp(220px, 17vw, 260px);padding-top:0} }

/* celular estreito: visual em largura total em cima, texto inteiro embaixo (o rótulo nunca quebra no ponto) */
.item-rotulo{white-space:nowrap}
@media (max-width:599px){
  .item,.item--inverso{grid-template-columns:minmax(0,1fr);gap:var(--e5)}
  .item:not(.item--empilha):not(.item--largo) .item-visual,.item--inverso .item-visual{order:0}
  .painel-visual{--fone-pad:22px;--fone-w:min(50vw, calc(54svh * .482 - 22px))}
  .item-foto{width:100%}
  .item-foto picture,.item-foto img{max-height:60svh}
  .item-texto h3{font-size:var(--t-destaque);line-height:1.15;max-width:22ch}
  .item-texto .texto-apoio{font-size:var(--t-texto)}
  .item:not(.item--largo):not(.item--texto) .item-rotulo{font-size:var(--t-mono)}
}

/* =====================================================================
   Legendas, contexto dos números e capas (15/10)
   ===================================================================== */

/* --- legendas de visual: um estilo só (mono, caixa alta, Grafite/Cinza), sem palavra sozinha --- */
.caso .item-legenda,.caso .momento-legenda,.caso .recepcao-legenda,.caso .carrosseis-legenda{
  font-family:var(--fonte-mono);font-size:var(--t-mono);font-weight:500;line-height:1.4;
  text-transform:uppercase;letter-spacing:.02em;color:var(--apoio);text-wrap:pretty;
}
@media (max-width:1023px){ .caso .item .item-legenda{display:block} }

/* --- linha de contexto embaixo dos números --- */
.num-contexto{grid-column:1 / -1;font-family:var(--fonte-mono);font-size:var(--t-mono);font-weight:500;line-height:1.5;color:var(--apoio);max-width:62ch;text-wrap:pretty;padding-top:var(--e4);border-top:1px solid var(--linha)}

/* --- 1. capa da advogada: grade de 16x12 com 60% da largura, celular sobre a borda dela --- */
.abertura-capa{container-type:inline-size}
@media (min-width:1024px){
  .abertura-capa .capa--advogada .capa-pontos{left:7cqw;top:9%;bottom:8%;justify-content:space-between}
  .abertura-capa .capa--advogada .capa-grade{--cp:calc(68cqw / 16)}
  .abertura-capa .capa--advogada .capa-legenda{font-size:var(--t-mono);white-space:nowrap}
  .abertura-capa .capa--advogada .capa-fone{left:53cqw;right:auto;top:33%;bottom:auto;--iphone-w:42cqw}
}
/* advocacia (Provimento 205): nada de avaliação de cliente no Google desenhado; no lugar, os resultados de baixo */
.caso--advogada .tela-google .g-aval,.capa--advogada .tela-google .g-aval{display:none}
.g-org{display:flex;flex-direction:column;border-top:calc(var(--pt)*8) solid #F1F3F4}
.g-org-res{padding:calc(var(--pt)*14) calc(var(--pt)*16);border-bottom:1px solid #ECEDEF;display:flex;flex-direction:column;gap:calc(var(--pt)*4)}
.g-org-res b{font-size:calc(var(--pt)*17);font-weight:500;color:#1A0DAB}
.g-org-res span{font-size:calc(var(--pt)*13);color:#4D5156}
.g-org-res .g-fechado{color:#B3261E}
.g-org-est{display:flex;gap:calc(var(--pt)*2)}
.g-org-est i{width:calc(var(--pt)*11);height:calc(var(--pt)*11);background:#DADCE0;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}

/* --- 6. capa da Levany: a foto cobre o painel inteiro, o leque fica por cima --- */
.capa--levany{background:#E9E7E3}
.capa--levany .capa-foto{width:100%!important;left:0}
.capa--levany .capa-foto img{object-position:72% 20%}
.capa--levany .capa-leque{left:14px;bottom:16px;top:auto;width:var(--leque-w, 54%)}
.capa--levany .capa-car{box-shadow:0 14px 34px rgba(17,17,19,.24)}
@media (min-width:1024px){
  .abertura-capa .capa--levany .capa-foto{width:100%}
  .abertura-capa .capa--levany .capa-foto img{object-position:78% 18%}
  .abertura-capa .capa-leque{left:7cqw;bottom:9%;width:58%}
  .proximo--levany .capa--levany .capa-foto{width:100%}
  .proximo--levany .capa-leque{left:32px;bottom:40px;width:52%}
}

/* --- Levany: abertura com o que a agência fez (o 4,2 milhões desce pra Os números) --- */
.abertura-frase{font-size:clamp(2rem, 1.3rem + 3vw, 4.25rem);font-weight:700;letter-spacing:-.045em;line-height:1.02;max-width:16ch;text-wrap:balance}
@media (min-width:1024px){ .abertura-frase{max-width:14ch} }

/* --- Levany, Os números: vendas reais em linhas com filete, no padrão dos números (logo abaixo do público) --- */
.num-vendas{display:flex;flex-direction:column;margin-top:var(--e5);border-top:1px solid var(--linha)}
.num-venda{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--e1) var(--e4);padding:var(--e4) 0;border-bottom:1px solid var(--linha);margin:0}
.num-venda b{font-size:clamp(2rem, 1.5rem + 2vw, 3.5rem);font-weight:700;letter-spacing:-.045em;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums}
.num-venda span{font-size:17px;color:var(--apoio);line-height:1.3;max-width:26ch}
.num-rotulo-publico{margin-bottom:var(--e3)}
@media (min-width:1024px){ .num-venda b{min-width:7.2ch} .num-vendas{margin-top:var(--e6)} }
/* --- Levany, itens 02 a 04: um visual por item --- */
.item--grande .item-visual{min-width:0}
@media (max-width:1023px){
  .item--grande,.item--grande.item--inverso{grid-template-columns:minmax(0,1fr)}
  .item--grande .item-visual,.item--grande.item--inverso .item-visual{order:0}
}
/* 02 · pesquisa (barras de anúncios por palavra) + a marca REAP+ */
.lv-janela{background:var(--painel)}
.lv-pesq{display:flex;flex-direction:column;gap:var(--e4);padding:clamp(18px, 3cqw, 32px)}
.lv-rot{color:var(--apoio);text-transform:uppercase;letter-spacing:.02em;font-size:12px}
.lv-barras{display:flex;flex-direction:column;gap:var(--e3);margin:0;padding:0}
.lv-barras li{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.lv-barras span{font-size:15px;font-weight:500;letter-spacing:-.01em;line-height:1.25}
.lv-barras i{display:block;height:10px;border-radius:3px;background:var(--linha);position:relative;overflow:hidden}
.lv-barras i::after{content:"";position:absolute;inset:0;background:var(--texto);border-radius:3px;transform-origin:0 50%;transform:scaleX(max(var(--v), .012));transition:transform 1.1s var(--ease-entra)}
.lv-barras li[data-vazio] i::after{background:var(--acento);transform:scaleX(.012)}
.lv-pesquisa.fd-espera .lv-barras i::after{transform:scaleX(0)}
.lv-barras li:nth-child(2) i::after{transition-delay:.12s}.lv-barras li:nth-child(3) i::after{transition-delay:.24s}.lv-barras li:nth-child(4) i::after{transition-delay:.36s}
.lv-marca{margin-top:var(--e3);padding-top:var(--e5);border-top:1px solid var(--linha)}
.lv-marca img{display:block;width:min(100%, 300px);height:auto}
/* 03 · print da página de venda */
.lv-pagina .janela img{display:block;width:100%;height:auto;aspect-ratio:2560/1130}
/* 04 · três celulares: anúncio no Instagram, Facebook e LinkedIn */
.lv-fones{display:flex;justify-content:center;align-items:flex-start;gap:var(--e3);padding:var(--e4) 0 var(--e2)}
.lv-fones .iphone{--iphone-w:min(30vw, 112px)}
.lv-fones .iphone:nth-child(2){margin-top:28px}
@media (min-width:600px){ .lv-fones .iphone{--iphone-w:150px} }
@media (min-width:1024px){ .lv-fones{gap:var(--e5)} .lv-fones .iphone{--iphone-w:clamp(150px, 11.5vw, 176px)} .lv-fones .iphone:nth-child(2){margin-top:44px} }

.tela-feed{background:#fff;--z-med:1.14;--z-peq:1.3}
.fd-app{flex:none;padding-top:calc(var(--pt0)*54)}
.fd-barra{height:calc(var(--pt)*48);display:flex;align-items:center;gap:calc(var(--pt)*10);padding:0 calc(var(--pt)*14)}
.fd-barra .ig-marca{width:calc(var(--pt)*99);height:calc(var(--pt)*37)}
.fd-fb{font-size:calc(var(--pt)*30);font-weight:800;letter-spacing:-.045em;color:#0866FF;line-height:1;flex:1}
.fd-circ{width:calc(var(--pt)*34);height:calc(var(--pt)*34);border-radius:50%;background:#E4E6EB;flex:none}
.fd-in{width:calc(var(--pt)*30);height:calc(var(--pt)*30);border-radius:calc(var(--pt)*5);background:#0A66C2;color:#fff;font-weight:800;font-size:calc(var(--pt)*20);display:grid;place-items:center;letter-spacing:-.04em;flex:none}
.fd-busca{flex:1;height:calc(var(--pt)*32);border-radius:calc(var(--pt)*5);background:#EDF3F8;color:#5E6266;font-size:calc(var(--pt)*14);display:flex;align-items:center;padding:0 calc(var(--pt)*10)}
.fd-lin{height:calc(var(--pt)*1);background:#E4E6EB}
.fd-cab{display:flex;align-items:center;gap:calc(var(--pt)*10);padding:calc(var(--pt)*10) calc(var(--pt)*12)}
.fd-av{width:calc(var(--pt)*38);height:calc(var(--pt)*38);border-radius:50%;overflow:hidden;flex:none;background:#E9E7E3}
.fd--li .fd-av{width:calc(var(--pt)*44);height:calc(var(--pt)*44)}
.fd-av img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.fd-quem{display:flex;flex-direction:column;min-width:0}
.fd-quem b{font-size:calc(var(--pt)*14.5);font-weight:600;white-space:nowrap}
.fd-quem small{font-size:calc(var(--pt)*12);color:#65676B;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fd-txt{font-size:calc(var(--pt)*14);line-height:1.35;padding:0 calc(var(--pt)*12) calc(var(--pt)*10);color:#050505}
.fd-midia{position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;background:#EFEFEF}
.fd-midia img{width:100%;height:100%;object-fit:cover;display:block}
.fd-cta{display:flex;align-items:center;justify-content:space-between;height:calc(var(--pt)*40);padding:0 calc(var(--pt)*12);font-size:calc(var(--pt)*14);font-weight:600;color:#fff;background:#0074CC;transition:background-color .5s ease .5s,color .5s ease .5s}
.fd-acoes{display:flex;align-items:center;gap:calc(var(--pt)*16);padding:calc(var(--pt)*10) calc(var(--pt)*12)}
.fd-acoes svg{width:calc(var(--pt)*26);height:calc(var(--pt)*26);display:block;flex:none}
.fd-acoes .fd-dir{margin-left:auto}
.fd-acoes--txt{justify-content:space-around;gap:0;border-top:1px solid #E4E6EB;padding:calc(var(--pt)*8) calc(var(--pt)*4)}
.fd-acao{display:flex;align-items:center;gap:calc(var(--pt)*6);font-size:calc(var(--pt)*13.5);font-weight:600;color:#65676B;transition:color .4s ease .6s}
.fd-acao svg{width:calc(var(--pt)*20);height:calc(var(--pt)*20)}
.fd-acao .fd-cheio{transition:fill-opacity .4s ease .6s}
.fd--fb .fd-acao.fd-on{color:#0866FF}.fd--li .fd-acao.fd-on{color:#0A66C2}
.fd-acao.fd-on .fd-cheio{fill-opacity:1}
.fd-coracao{transition:transform .35s cubic-bezier(.3,1.6,.5,1) .6s}
.fd-coracao .fd-cheio{fill:#FF3040;stroke:#FF3040;transition:fill-opacity .3s ease .6s,stroke-opacity .3s ease .6s}
.fd-leg{font-size:calc(var(--pt)*13.5);line-height:1.35;padding:0 calc(var(--pt)*12);margin:0}
/* parado: curtido e com o botão do anúncio aceso (estado final); a ação acontece ao entrar */
.lv-redes.fd-espera .fd-cta{background:#EFEFEF;color:#000}
.lv-redes.fd-espera .fd-coracao .fd-cheio{fill-opacity:0;stroke-opacity:0}
.lv-redes.fd-espera .fd-acao.fd-on{color:#65676B}
.lv-redes.fd-espera .fd-acao.fd-on .fd-cheio{fill-opacity:0}
.lv-redes .iphone:nth-child(2) .fd-acao,.lv-redes .iphone:nth-child(2) .fd-cheio{transition-delay:.9s}
.lv-redes .iphone:nth-child(3) .fd-acao,.lv-redes .iphone:nth-child(3) .fd-cheio{transition-delay:1.2s}

/* --- 5. Rogge, item 02: o retrato em P&B de Quem somos; no celular, largura total 4:5 --- */
.item-foto--pb picture,.item-foto--pb img{object-position:50% 30%}
@media (max-width:1023px){
  .item:has(.item-foto),.item--inverso:has(.item-foto){grid-template-columns:minmax(0,1fr)}
  .item .item-foto{width:100%;order:0}
  .item-foto picture,.item-foto img{max-height:none}
}

/* --- 2. advogada, item Google: só a janela da busca, sem carrossel lateral --- */
.google-busca--so{margin:0}
.google-busca--so .janela-busca{max-height:none;-webkit-mask-image:none;mask-image:none}

/* --- 8 e 9. Próximo caso: sem pista nem troca sozinha; capa na mesma dobra, já subindo --- */
.proximo{height:auto}
.proximo-palco{position:relative;height:auto;min-height:0;overflow:clip;padding:var(--e8) 0 var(--e7)}
.proximo-linha{align-items:last baseline}
.proximo-capa{flex:none;height:240px;min-height:0}
.proximo-capa-caixa{transform:translateY(calc((1 - var(--p,1)) * 16%))}
.proximo-abrir{display:inline-flex;align-items:center;min-height:44px}
@media (max-width:1023px){ .proximo-palco{padding-bottom:var(--e7)} }
@media (min-width:1024px){
  .proximo{height:auto}
  .proximo-palco{height:auto;min-height:0;padding:var(--secao) 0 0}
  .proximo-grade{align-items:start}
  .proximo-texto{padding-top:0;padding-bottom:var(--e8)}
  .proximo-capa{height:min(64vh, 560px);margin-top:0}
}
html.reduzido .proximo-capa{min-height:0}
/* --- 10. advogada: o trecho preso dos 192 pontos fica curto no computador --- */
@media (min-width:1024px){ .momento{height:calc(100vh + 34vh)} }
/* --- dermatologista, Os números: a procura de antes e a de depois, em barras (sai do próprio +150%) --- */
.num-barras{grid-column:1 / -1;margin:0;display:flex;flex-direction:column;gap:var(--e5)}
.nb-linha{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"rot valor" "trilho trilho";align-items:end;gap:var(--e2) var(--e4)}
.nb-rot{grid-area:rot;color:var(--apoio);text-transform:uppercase;letter-spacing:.02em}
.nb-trilho{grid-area:trilho;display:block;height:clamp(28px, 1.2rem + 2.6vw, 64px)}
.nb-trilho i{display:block;height:100%;width:calc(var(--v) * 100%);background:var(--apagado-atual);border-radius:4px;transform-origin:0 50%;transition:transform 1.3s var(--ease-entra)}
.nb-linha--depois .nb-trilho i{background:var(--menta);transition-delay:.25s}
.nb-valor{grid-area:valor;font-size:var(--t-titulo);font-weight:700;letter-spacing:-.045em;line-height:.9;color:var(--texto);font-variant-numeric:tabular-nums}
.num-barras.fd-espera .nb-trilho i{transform:scaleX(0)}
@media (min-width:1024px){
  .nb-linha{grid-template-columns:220px minmax(0,1fr) calc(var(--t-manchete) * 3.3);grid-template-areas:"rot trilho valor";align-items:center;gap:var(--gap) var(--e6)}
  .nb-valor{font-size:var(--t-manchete);text-align:right}
}
.proximo-dica,.proximo-abrir{white-space:nowrap}
/* janela fina dentro de figura que abre por recorte: sem sombra (a sombra recortada vira um retângulo cinza) */
.lv-pesquisa .janela,.lv-pagina .janela{box-shadow:none}
/* Rogge: "testado aqui primeiro." cabe numa linha a 375 (sem palavra sozinha) */
@media (max-width:380px){ .caso--rogge .fez-titulo{font-size:1.95rem} }
/* celular: Levany mais curta (os visuais novos não podem passar a página de 9 telas) */
@media (max-width:1023px){
  .lv-pesq{padding:16px 16px 18px;gap:var(--e3)}
  .lv-barras{gap:9px}
  .lv-barras span{font-size:14px}
  .lv-barras i{height:8px}
  .lv-marca{margin-top:var(--e1);padding-top:var(--e4)}
  .lv-marca img{width:210px}
  .caso--levany .abertura-capa{--capa-h:250px}
  .caso--levany .abertura-apoio{display:none}
  .caso--levany .car{width:min(58vw, 240px)}
  .proximo-palco{padding-top:var(--e7)}
  .proximo-capa{height:210px}
  .num-venda{padding:var(--e3) 0}
}
@media (min-width:1024px){
  .caso-numeros{padding-bottom:var(--e9)}
  .proximo-palco{padding-top:var(--e9)}
}

/* =====================================================================
   Legendas no Papel, contadores e telas sem salto (15/10, tarde)
   ===================================================================== */

/* --- legendas fora do painel escuro ficam no Papel: Grafite (6:1), nunca o cinza da Noite (2,3:1) --- */
.caso .painel-visual--noite > .item-legenda{color:var(--grafite)}

/* --- a legenda entra por último, depois que o cartão abriu (o caso.js põe .visto) --- */
html.js:not(.reduzido) .caso .item-visual[data-abre] > .item-legenda{opacity:0;transform:translateY(6px);transition:opacity .5s var(--ease-entra),transform .5s var(--ease-entra)}
html.js:not(.reduzido) .caso .item-visual[data-abre].visto > .item-legenda{opacity:1;transform:none}

/* --- advogada, 192 pontos: o ponto ainda não contado é só um lugar vazio, nunca uma segunda categoria cinza --- */
.pontos i{background:rgba(245,245,242,.07)}

/* --- números com contador: algarismos de mesma largura, SEM largura reservada (acabamento final, 15/10: a reserva
       de 1,75em da dermatologista abria um vão entre o 0 e o %). O número do topo já nasce final e não conta. --- */
.caso .heroi-caso .numero-valor,.caso .num-heroi .numero-valor{font-variant-numeric:tabular-nums}

/* --- WhatsApp desenhado nos casos: as linhas já ocupam o lugar delas; o balão só aparece (opacidade e
       transform), sem crescer a altura e empurrar as vizinhas (CLS) --- */
.caso .tela-whatsapp.tocando .wa-linha{animation:none}
.caso .tela-whatsapp .wa-chat{contain:layout paint}

/* --- advogada, Os números: o número e a linha do tempo dos 2 meses na mesma dobra do título --- */
.caso-numeros--advogada .numeros-titulo{margin-bottom:var(--e6)}
.numeros-grade--linha{align-items:start}
.adv-linha{margin:0}
.al-marcos{position:relative;display:flex;flex-direction:column;gap:0;margin:0;padding:0}
.al-marco{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr);grid-template-areas:"no quando" ". oque";gap:4px var(--e3);padding-bottom:var(--e5)}
.al-marco:last-child{padding-bottom:0}
/* o fio entre os marcos: menta no que já aconteceu, tracejado na projeção */
.al-marco::before{content:"";position:absolute;left:10px;top:18px;bottom:-4px;width:2px;background:var(--menta);transform-origin:50% 0;transition:transform .7s var(--ease-entra) var(--atraso,0s)}
.al-marco:nth-child(1){--atraso:0s}.al-marco:nth-child(2){--atraso:.22s}.al-marco:nth-child(3){--atraso:.44s}
.al-marco--feito::before{background:none;border-left:2px dashed var(--linha-forte);width:0}
.al-marco:last-child::before{display:none}
.al-no{grid-area:no;align-self:center;width:12px;height:12px;margin-left:5px;border-radius:50%;background:var(--menta);transition:transform .45s var(--ease-entra) var(--atraso,0s),opacity .45s var(--ease-entra) var(--atraso,0s)}
.al-marco--feito .al-no{width:18px;height:18px;margin-left:2px;box-shadow:0 0 0 5px rgba(61,220,151,.18)}
.al-marco--projecao .al-no{background:transparent;border:2px dashed var(--cinza)}
.al-quando{grid-area:quando;align-self:center;color:var(--apoio);text-transform:uppercase;letter-spacing:.02em;font-size:var(--t-mono);font-weight:500}
.al-oque{grid-area:oque;font-size:var(--t-destaque);font-weight:600;letter-spacing:-.025em;line-height:1.15;color:var(--texto);transition:opacity .5s var(--ease-entra) var(--atraso,0s),transform .5s var(--ease-entra) var(--atraso,0s)}
.al-oque b{font-weight:700;color:var(--menta)}
.al-marco--projecao .al-oque,.al-marco--projecao .al-oque b{color:var(--apoio);font-weight:600}
.al-marco:nth-child(4){--atraso:.66s}
.adv-linha.fd-espera .al-marco::before{transform:scaleY(0)}
.adv-linha.fd-espera .al-no{transform:scale(0);opacity:0}
.adv-linha.fd-espera .al-oque{opacity:0;transform:translateY(8px)}
@media (min-width:1024px){
  .caso-numeros--advogada{padding-top:var(--e9)}
  .caso-numeros--advogada .numeros-titulo{margin-bottom:var(--e7)}
  .numeros-grade--linha .num-principal{grid-column:1 / 8}
  .numeros-grade--linha .num-heroi .numero-linha{font-size:min(var(--t-gigante), 9.5rem);flex-wrap:nowrap}
  .adv-linha{grid-column:9 / 13;padding-top:var(--e2)}
  .al-marco{padding-bottom:var(--e6)}
}

/* --- dermatologista, barras: o "antes" com rótulo e valor (Base), nunca vazio --- */
.nb-valor--base{font-size:var(--t-mono);font-weight:500;letter-spacing:.02em;text-transform:uppercase;color:var(--apoio);align-self:center}
@media (min-width:1024px){ .nb-valor--base{font-size:var(--t-mono);text-align:right} }


/* --- Levany, abertura: o que a agência fez em cima; o número dela, rotulado como público que ela já tinha --- */
.caso--levany .abertura-apoio--fez{display:block;font-size:var(--t-destaque);font-weight:600;letter-spacing:-.025em;line-height:1.18;color:var(--texto);max-width:22ch;text-wrap:balance}
.abertura-rotulo-numero{margin-bottom:var(--e2)}
@media (max-width:1023px){ .caso--levany .abertura-apoio--fez{font-size:1.25rem;max-width:26ch} }

/* --- Levany, Os números: uma regra só pra número com unidade (valor grande + unidade pequena, legenda embaixo) --- */
.num-vendas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e5) var(--e4);margin-top:0;border-top:0}
.caso .num-venda{display:flex;flex-direction:column;align-items:flex-start;flex-wrap:nowrap;gap:0;padding:var(--e3) 0 0;border-top:1px solid var(--linha);border-bottom:0;margin:0}
.caso .num-venda .numero-linha{font-size:clamp(2rem, 1.2rem + 2.6vw, 4.5rem);letter-spacing:-.045em;line-height:1}
.caso .num-venda .numero-legenda{margin-top:var(--e2);font-size:16px;line-height:1.3;max-width:22ch}
.numeros-grade--levany .num-lado{gap:var(--e5)}
.numeros-grade--levany .num-lado .num-rotulo-publico{margin-bottom:calc(-1 * var(--e2))}
.num-print--recorte img{height:auto;aspect-ratio:281/268;object-position:50% 100%}
.num-print--recorte figcaption{margin-top:var(--e3)}
.num-projecao--discreta{padding:14px 18px 16px}
.num-projecao--discreta .rotulo{margin-bottom:var(--e2)}
.num-projecao--discreta .numero-linha{font-size:clamp(1.5rem, 1.3rem + .8vw, 2rem)}
.num-projecao--discreta .numero-legenda{font-size:15px;margin-top:4px}
@media (max-width:1023px){
  .num-vendas{gap:var(--e4) var(--e4)}
  .caso .num-venda .numero-legenda{font-size:15px}
  .numeros-grade--levany .num-lado{gap:var(--e4)}
}
@media (min-width:1024px){
  .numeros-grade--levany .num-principal{grid-column:1 / 8}
  .numeros-grade--levany .num-lado{grid-column:9 / 13}
  .num-vendas{gap:var(--e7) var(--gap)}
  .num-projecao--discreta{padding:18px 22px}
}

/* --- Levany, pesquisa: a lista das palavras com o que a Biblioteca de Anúncios mostrava (sem barra de número) --- */
.lv-lista{display:flex;flex-direction:column;margin:0;padding:0;border-top:1px solid var(--linha)}
.lv-lista li{display:flex;justify-content:space-between;align-items:baseline;gap:var(--e3);padding:10px 0;border-bottom:1px solid var(--linha)}
.lv-lista span{font-size:15px;font-weight:500;letter-spacing:-.01em;line-height:1.25}
.lv-lista b{flex:none;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.02em}
.lv-cheio{color:var(--apoio)}
.lv-vazio{color:var(--acento)}
.lv-pesquisa.fd-espera .lv-lista b{opacity:0}
.lv-lista b{transition:opacity .5s var(--ease-entra)}
.lv-lista li:nth-child(2) b{transition-delay:.15s}.lv-lista li:nth-child(3) b{transition-delay:.3s}.lv-lista li:nth-child(4) b{transition-delay:.45s}
@media (max-width:1023px){ .lv-lista li{padding:8px 0} .lv-lista span{font-size:14px} }

/* --- Rogge: a foto P&B da casa (o mesmo grade do retrato de Quem somos) --- */
.capa--rogge-foto{background:#1a1a1a}

/* --- o conteúdo do cartão só aparece quando o recorte começa a abrir (nada de pedaço da tela solto no papel) --- */
html.js:not(.reduzido) .caso .caso-itens .item-visual[data-abre] > :not(figcaption){opacity:0;transition:opacity .25s var(--ease-entra)}
html.js:not(.reduzido) .caso .caso-itens .item-visual[data-abre].abrindo > :not(figcaption){opacity:1}
/* a regra antiga das linhas de venda (.num-venda span) não vale pros spans do número */
.caso .num-venda .numero-linha span{font-size:inherit;color:inherit;line-height:inherit;max-width:none}
.caso .num-venda .numero-linha .numero-unidade{font-size:.42em}
.caso .num-venda .numero-linha .numero-prefixo{margin-right:.2em}
@media (max-width:1023px){
  .caso-numeros--advogada .numeros-grade{gap:var(--e5)}
  .al-marco{padding-bottom:var(--e4)}
  .al-oque{font-size:1.25rem}
}
/* --- WhatsApp em linha no fim do "O que a gente fez" (os visuais escondem o botão fixo no celular) --- */
.itens-acao{margin-top:var(--e6)}
@media (min-width:1024px){ .itens-acao{grid-column:4 / 13;margin-top:var(--e8)} }

/* =====================================================================
   Aviso das telas, trilha do resultado e números da Levany (15/10, noite)
   ===================================================================== */

/* --- aviso único das telas desenhadas (casos anônimos), logo abaixo do título do 02 --- */
.fez-aviso{margin-top:var(--e5);max-width:56ch}
@media (min-width:1024px){ .fez-aviso{margin-top:var(--e6);font-size:var(--t-mono)} }

/* --- o WhatsApp do fim do 02 mora no texto do último item (nada de botão solto no Papel) --- */
.item-acao{margin-top:var(--e3)}
.itens-acao{display:none}
@media (min-width:1024px){
  .caso-itens{padding-bottom:var(--e9)}
  .item-acao{margin-top:var(--e5)}
}

/* --- a trilha do resultado (advogada e dermatologista): o caminho em marcos, o número uma vez só,
       a projeção tracejada e cinza, menor que o real --- */
.trilha{margin:0}
.tr-marcos{position:relative;display:flex;flex-direction:column;margin:0;padding:0}
.tr-marco{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr);grid-template-areas:"no quando" ". oque";gap:4px var(--e3);padding-bottom:var(--e5)}
.tr-marco:last-child{padding-bottom:0}
.tr-marco::before{content:"";position:absolute;left:10px;top:18px;bottom:-4px;width:2px;background:var(--menta);transform-origin:50% 0;transition:transform .7s var(--ease-entra) var(--atraso,0s)}
.tr-marco:last-child::before{display:none}
.tr-marco--feito::before{background:none;width:0;border-left:2px dashed var(--cinza)}
.tr-marco:nth-child(1){--atraso:0s}.tr-marco:nth-child(2){--atraso:.18s}.tr-marco:nth-child(3){--atraso:.36s}.tr-marco:nth-child(4){--atraso:.54s}.tr-marco:nth-child(5){--atraso:.72s}
.tr-no{grid-area:no;align-self:center;width:12px;height:12px;margin-left:5px;border-radius:50%;background:var(--menta);transition:transform .45s var(--ease-entra) var(--atraso,0s),opacity .45s var(--ease-entra) var(--atraso,0s)}
.tr-marco--feito .tr-no{width:18px;height:18px;margin-left:2px;box-shadow:0 0 0 5px rgba(61,220,151,.18)}
.tr-marco--projecao .tr-no{background:transparent;border:2px dashed var(--cinza)}
.tr-quando{grid-area:quando;align-self:center;color:var(--apoio);text-transform:uppercase;letter-spacing:.02em;font-size:var(--t-mono);font-weight:500}
.tr-oque{grid-area:oque;display:block;font-size:1.25rem;font-weight:600;letter-spacing:-.025em;line-height:1.18;color:var(--texto);max-width:20ch;text-wrap:balance;transition:opacity .5s var(--ease-entra) var(--atraso,0s),transform .5s var(--ease-entra) var(--atraso,0s)}
.tr-numero{display:block}
.tr-numero .numero-linha{display:flex;align-items:baseline;font-size:clamp(3.25rem, 2rem + 6vw, 6.5rem);font-weight:700;letter-spacing:-.055em;line-height:.92;color:var(--texto);font-variant-numeric:tabular-nums}
.tr-numero .numero-sinal{color:var(--menta);margin-right:.04em}
.tr-numero .numero-prefixo{font-size:.42em;margin-right:.12em;letter-spacing:-.02em}
.tr-numero .numero-unidade{font-size:.42em;margin-left:.12em;letter-spacing:-.02em}
.tr-numero .numero-unidade--cheia{font-size:.8em;margin-left:.02em}
.tr-leg{display:block;margin-top:var(--e2);font-size:17px;font-weight:500;letter-spacing:-.01em;line-height:1.3;color:var(--apoio);max-width:22ch}
.tr-oque--projecao{font-size:17px;font-weight:500;color:var(--apoio);letter-spacing:-.01em;line-height:1.3}
.trilha.fd-espera .tr-marco::before{transform:scale(0)}
.trilha.fd-espera .tr-no{transform:scale(0);opacity:0}
.trilha.fd-espera .tr-oque{opacity:0;transform:translateY(8px)}
.caso-numeros .trilha + .num-contexto{margin-top:var(--e6)}
@media (min-width:1024px){
  .tr-marcos{display:grid;grid-template-columns:1fr 1fr 1.7fr 1fr;gap:0 var(--gap)}
  .trilha--5 .tr-marcos{grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.9fr)}
  .tr-marco{grid-template-columns:minmax(0,1fr);grid-template-areas:"no" "quando" "oque";align-content:start;gap:var(--e4);padding:0 var(--e4) 0 0}
  .tr-marco::before{left:18px;right:calc(-1 * var(--gap));top:8px;bottom:auto;width:auto;height:2px;transform-origin:0 50%}
  .tr-marco--feito::before{top:8px;height:0;width:auto;border-left:0;border-top:2px dashed var(--cinza);left:30px}
  .tr-no{align-self:start;margin-left:0}
  .tr-marco--feito .tr-no{margin:-3px 0 0 -3px}
  .tr-quando{align-self:start}
  .tr-oque{font-size:clamp(1.375rem, 1rem + .7vw, 1.75rem);max-width:14ch}
  .tr-marco--feito .tr-oque{max-width:none}
  .tr-numero .numero-linha{font-size:clamp(5rem, 2rem + 5.4vw, 8.5rem)}
  .tr-oque--projecao{font-size:17px;max-width:16ch}
  .caso-numeros .trilha + .num-contexto{margin-top:var(--e8)}
}

/* --- Levany, Os números: uma grade só de 4 números + os dois prints reais na mesma base; projeção à parte, em linha --- */
.lv-numeros{display:grid;gap:var(--e6)}
.lv-grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e5) var(--e4)}
.lv-prints{display:flex;flex-direction:column;gap:var(--e3)}
.lv-prints .num-prints{gap:var(--e3)}
.lv-prints .num-prints .viral{--viral-largura:calc((100% - var(--e3)) / 2)}
.lv-prints .viral figcaption{margin-top:var(--e2)}
.lv-prints .viral .numero-linha{font-size:clamp(1.25rem, 1.1rem + .6vw, 1.625rem)}
.lv-prints .viral .numero-legenda{font-size:13px;color:var(--apoio)}
.lv-projecao{display:flex;flex-direction:column;gap:6px;margin:var(--e6) 0 0;padding-top:var(--e4);border-top:1px dashed var(--linha-forte);max-width:72ch}
.lv-projecao-rot{color:var(--apoio);text-transform:uppercase;letter-spacing:.02em;font-size:12px;font-weight:500}
.lv-projecao-tx{font-size:15px;line-height:1.45;color:var(--apoio)}
@media (min-width:1024px){
  .lv-numeros{grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:end}
  .lv-grade{grid-column:1 / 8;gap:var(--e7) var(--gap)}
  .lv-prints{grid-column:9 / 13}
  .lv-projecao{flex-direction:row;align-items:baseline;gap:var(--e5);margin-top:var(--e8);max-width:none}
  .lv-projecao-rot{flex:none;font-size:var(--t-mono)}
  .lv-projecao-tx{font-size:16px}
}

/* --- Rogge, Os números: 28,3 mil é o clímax; o 5,7 milhões vira referência pequena --- */
.num-apoio--ref .numero-linha{font-size:clamp(1.5rem, 1.2rem + 1vw, 2.25rem)!important}
.num-apoio--ref .numero-legenda{font-size:15px;color:var(--apoio)}
/* Rogge, 02: a parede com a mesma calha entre todos e a base alinhada; o primeiro só maior (escala), nunca mais alto */
.caso--rogge .parede-item--grande .numero-linha{font-size:clamp(1.25rem, 1rem + 1vw, 2.25rem)!important}
.caso--rogge .parede-item--grande .numero-legenda{font-size:13px!important}

/* --- advogada, busca desenhada: o anúncio já ocupa a altura dele; entra só com opacidade e transform (sem CLS) --- */
.caso .tela-busca.tocando .jb-res--patro{animation:none}
.caso .tela-busca .jb-lista{contain:layout}

/* --- trilha: o marco do resultado cresce por escala (o rótulo fica na mesma linha dos outros) --- */
.tr-marco--feito .tr-no{width:12px;height:12px;margin-left:5px;transform:scale(1.5);box-shadow:0 0 0 4px rgba(61,220,151,.18)}
@media (min-width:1024px){ .tr-marco--feito .tr-no{margin:0} .tr-marco--feito::before{left:24px} }

/* --- advogada: página abaixo de 9 telas --- */
@media (min-width:1024px){
  .caso--advogada .momento{height:calc(100vh + 16vh)}
  .caso-numeros--advogada,.caso-numeros--dermatologista{padding-bottom:var(--e8)}
}
/* celular: os 192 pontos sem trecho preso (a grade acende enquanto passa, cerca de 0,75 tela) */
@media (max-width:1023px){
  .caso--advogada .momento{height:auto}
  .caso--advogada .momento-palco{position:relative;height:auto;padding-top:var(--e6);padding-bottom:var(--e6)}
}

/* --- celular: aparelho maior (texto do app legível) e recortado embaixo com esfumado, no lugar do aparelho inteiro miúdo --- */
@media (max-width:599px){
  .painel-visual{--fone-w:min(70vw, 280px)}
  .painel-visual .item-fone{align-items:flex-start;padding-bottom:0;overflow:hidden;height:calc(var(--fone-w) / .482 * .58 + var(--fone-pad))}
  .painel-visual .item-fone .iphone{-webkit-mask-image:linear-gradient(180deg,#000 calc(var(--fone-w) / .482 * .46),transparent calc(var(--fone-w) / .482 * .58));mask-image:linear-gradient(180deg,#000 calc(var(--fone-w) / .482 * .46),transparent calc(var(--fone-w) / .482 * .58))}
  .item--empilha .item-fone{padding-bottom:0}
}

/* --- próximo caso (dermatologista) no celular: o aparelho mostra o começo da conversa, com as duas primeiras mensagens --- */
/* (o aparelho volta à posição de antes: a prévia agora mostra a conversa inteira, no estado final) */
/* celular: ajuste fino de altura dos casos (meta de 9 telas) */
@media (max-width:1023px){
  .caso--advogada .momento-palco{padding-top:var(--e5);padding-bottom:var(--e5)}
  .tr-marco{padding-bottom:var(--e4)}
  .caso-numeros{padding-top:var(--e6)}
  .caso-numeros .trilha + .num-contexto{margin-top:var(--e5)}
}
@media (max-width:599px){
  .painel-visual .item-fone{height:calc(var(--fone-w) / .482 * .52 + var(--fone-pad))}
  .painel-visual .item-fone .iphone{-webkit-mask-image:linear-gradient(180deg,#000 calc(var(--fone-w) / .482 * .42),transparent calc(var(--fone-w) / .482 * .52));mask-image:linear-gradient(180deg,#000 calc(var(--fone-w) / .482 * .42),transparent calc(var(--fone-w) / .482 * .52))}
}
@media (max-width:1023px){
  .caso--levany .car{width:min(52vw, 220px)}
  .lv-numeros{gap:var(--e5)}
  .lv-grade{gap:var(--e4) var(--e4)}
  .lv-projecao{margin-top:var(--e5)}
  .caso-fez{padding-top:var(--e7)}
}
@media (max-width:1023px){
  .caso--levany .carrosseis-faixa{margin-top:var(--e5)}
  .caso--levany .carrosseis-legenda{margin-top:var(--e3)}
  .caso--levany .lv-fones{padding-top:var(--e3)}
  .caso-itens--levany .itens{gap:var(--e5)}
}
/* Rogge, parede: a janela ocupa a coluna inteira (antes o primeiro print ficava com 180 px numa coluna de 265,
   e a sobra virava uma calha de 110 px); calha igual, base alinhada, o primeiro maior só pela coluna */
.caso--rogge .parede .viral .janela{width:100%}
@media (min-width:1024px){ .caso--rogge .parede{grid-template-columns:1.3fr 1fr 1fr 1fr;align-items:end} }
/* o print tem teto de 180 px (nitidez): o primeiro fica com o teto e os outros com 150, calhas iguais entre todos */
@media (min-width:1024px){
  .caso--rogge .parede{grid-template-columns:180px repeat(3, 150px);justify-content:space-between;align-items:end}
  .caso--rogge .parede-item--grande{width:180px!important}
}

/* =====================================================================
   Levany 04 com os três aparelhos inteiros (15/10, 15h30)
   ===================================================================== */
/* Levany 04 · os três celulares: aparelho inteiro (nada cortado), app fiel e legível.
   Computador: o texto em cima e os três aparelhos de 250 px embaixo, na largura toda do item.
   Celular: faixa de arrastar, um aparelho de ~270 px por vez (texto do app com 11 px ou mais). */
.lv-fones{gap:var(--e5);padding:var(--e4) 0 var(--e5)}
.lv-fones .iphone{--iphone-w:250px}
.lv-fones .iphone:nth-child(2){margin-top:0}
.lv-fones .tela-feed{--z-med:1.42;--z-peq:1.42;--z-mini:1.42}
/* o app no tamanho do iPhone: barra, cabeçalho e ações mais justos, pra o traço de início ficar livre */
.lv-fones .fd-barra{height:calc(var(--pt)*44)}
.lv-fones .fd-cab{padding:calc(var(--pt)*8) calc(var(--pt)*12)}
.lv-fones .fd--li .fd-av{width:calc(var(--pt)*40);height:calc(var(--pt)*40)}
.lv-fones .fd-txt{padding-bottom:calc(var(--pt)*8);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.lv-fones .fd-cta{height:calc(var(--pt)*36)}
.lv-fones .fd-acoes{gap:calc(var(--pt)*15);padding:calc(var(--pt)*7) calc(var(--pt)*12)}
.lv-fones .fd-acoes svg{width:calc(var(--pt)*24);height:calc(var(--pt)*24)}
.lv-fones .fd-leg{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Facebook: ícone + palavra, numa linha só; LinkedIn: ícone em cima da palavra, como no app */
.lv-fones .fd-acoes--txt{justify-content:space-around;gap:0;padding:calc(var(--pt)*7) calc(var(--pt)*4)}
.lv-fones .fd-acao{gap:calc(var(--pt)*5);font-size:calc(var(--pt)*12.5);white-space:nowrap;line-height:1.1}
.lv-fones .fd-acao svg{width:calc(var(--pt)*18);height:calc(var(--pt)*18);flex:none}
.lv-fones .fd--li .fd-acao{flex-direction:column;gap:calc(var(--pt)*3);font-size:calc(var(--pt)*11);min-width:0}
/* cabeçalho do Facebook: lupa e Messenger em círculos cinza, no tamanho do app */
.lv-fones .fd-fb{font-size:calc(var(--pt)*28)}
.lv-fones .fd-circ{width:calc(var(--pt)*32);height:calc(var(--pt)*32);display:grid;place-items:center}
.lv-fones .fd-circ svg{width:calc(var(--pt)*18);height:calc(var(--pt)*18);display:block}
.lv-fones-dica{display:none;margin:0;color:var(--apoio);text-transform:uppercase;letter-spacing:.04em;font-size:12px}
/* cada aparelho curte quando aparece na faixa (celular) */
.lv-redes .iphone.fd-espera .fd-cta{background:#EFEFEF;color:#000}
.lv-redes .iphone.fd-espera .fd-coracao .fd-cheio{fill-opacity:0;stroke-opacity:0}
.lv-redes .iphone.fd-espera .fd-acao.fd-on{color:#65676B}
.lv-redes .iphone.fd-espera .fd-acao.fd-on .fd-cheio{fill-opacity:0}
@media (max-width:1023px){
  .caso--levany .lv-fones{justify-content:flex-start;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin-inline:calc(-1 * var(--margem));padding:var(--e3) var(--margem) var(--e4);scroll-padding-inline:var(--margem);gap:var(--e4)}
  .lv-fones::-webkit-scrollbar{display:none}
  .lv-fones .iphone{--iphone-w:min(61vw, 236px);scroll-snap-align:start}
  .lv-fones-dica{display:block;margin-top:calc(-1 * var(--e2))}
  .lv-redes .iphone:nth-child(n) .fd-acao,.lv-redes .iphone:nth-child(n) .fd-cheio,.lv-redes .iphone:nth-child(n) .fd-cta,.lv-redes .iphone:nth-child(n) .fd-coracao{transition-delay:.3s}
}
@media (min-width:1024px){
  .lv-fones{justify-content:space-between;padding:var(--e5) var(--e5) var(--e6)}
  .lv-fones .iphone:nth-child(2){margin-top:var(--e6)}
  .item--fones .item-texto{grid-column:1 / 10;order:1;padding-left:0;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:var(--e3) var(--gap);align-items:end}
  .item--fones .item-texto>*{grid-column:1 / 6}
  .item--fones .item-texto .texto-apoio{grid-column:6 / 10;grid-row:3 / 4;align-self:end;margin-bottom:.35em}
  .item--fones .item-texto h3{max-width:20ch}
  .item--fones .item-visual{grid-column:1 / 10;order:2}
  .item--fones .item-legenda{text-align:center}
}

/* Levany, Os números: "Antes da agência" em cima dos cartões; os prints reais maiores (até 270 px), base com a última linha */
.lv-vendas{display:flex;flex-direction:column;gap:var(--e5);min-width:0}
.lv-antes{margin:0;color:var(--apoio);text-transform:uppercase;letter-spacing:.04em;font-size:12px;font-weight:500;padding-bottom:var(--e3);border-bottom:1px solid var(--linha)}
@media (min-width:1024px){
  .lv-vendas{grid-column:1 / 7;gap:var(--e6)}
  .lv-antes{font-size:var(--t-mono)}
  .lv-vendas .lv-grade{grid-column:auto;gap:var(--e7) var(--gap)}
  .lv-prints{grid-column:7 / 13;justify-self:end;width:min(100%, calc(270px * 2 + var(--e5)))}
  .lv-prints .num-prints{width:100%;gap:var(--e5)}
  .lv-prints .num-prints .viral{--viral-largura:calc((100% - var(--e5)) / 2)}
}

/* próximo caso no celular: a capa logo depois do nome; filete fixo no lugar da barra que enche */
@media (max-width:1023px){
  .proximo-grade{gap:var(--e3)}
  .proximo-texto{display:contents}
  .proximo-texto>.rotulo{order:1}
  .proximo-nome{order:2}
  .proximo-resultado{order:3}
  .proximo-capa{order:4;margin-top:var(--e2);overflow:clip;border-radius:var(--r-painel)}
  .proximo-guia{order:5;margin-top:var(--e2)}
  .proximo-acoes{order:6}
  .proximo-barra{height:1px}
  .proximo-barra i{display:none}
}

/* trilha (advogada e dermatologista): o resultado nunca espera; só o nó e o filete entram em onda */
.trilha.fd-espera .tr-marco--feito .tr-oque{opacity:1;transform:none}
.tr-marcos .tr-marco--feito{--atraso:.24s}
@media (min-width:1024px){ .item--fones .item-texto .item-acao{justify-self:start;width:auto} }

/* celular: páginas de caso dentro de 9 telas. O fim do capítulo 03 e o próximo caso não precisam da reserva inteira
   do botão fixo (a página continua embaixo deles); o vazio do fim do 03 fica em 64 px */
@media (max-width:1023px){
  .caso-numeros.reserva-botao{padding-bottom:var(--e8)}
  .proximo-palco{padding-bottom:var(--e7)}
  .lv-antes{padding-bottom:0;border-bottom:0}
  .lv-vendas{gap:var(--e4)}
}
@media (max-width:1023px){
  .caso-numeros.reserva-botao{padding-bottom:var(--e7)}
  .proximo-capa{height:180px}
  /* o resultado da trilha: número e legenda lado a lado (o número continua o maior da seção) */
  .tr-marco--feito .tr-oque{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--e3);max-width:none}
  .tr-marco--feito .tr-numero .numero-linha{font-size:3rem}
  .tr-marco--feito .tr-leg{margin-top:0;max-width:16ch}
}
@media (max-width:1023px){
  .tr-marco{padding-bottom:var(--e3)}
  .caso-numeros .trilha + .num-contexto{margin-top:var(--e4)}
  .caso--levany .lv-fones{padding-bottom:var(--e3)}
  .caso-itens--levany .itens{gap:var(--e4)}
  .lv-numeros{gap:var(--e4)}
  .lv-projecao{margin-top:var(--e4)}
}
@media (max-width:1023px){ .caso--levany .caso-numeros{padding-top:var(--e5)} }
/* Levany, prints reais: a janela ocupa a coluna (até 270 px no computador, o arquivo tem 281) */
@media (min-width:1024px){ .lv-prints .num-prints .viral.num-print .janela{max-width:none;width:100%} }
/* computador: passos da trilha sem palavra sozinha. Dermatologista: as quatro colunas iguais e mais largas, texto em duas linhas;
   advogada: a coluna da projeção cabe "Projeção · até o fim do ano" numa linha */
@media (min-width:1024px){
  .trilha--5 .tr-marcos{grid-template-columns:repeat(4,minmax(0,1.05fr)) minmax(0,1.8fr)}
  .trilha--derma .tr-marco:not(.tr-marco--feito) .tr-oque{font-size:1.3125rem;max-width:none;text-wrap:wrap}
  .trilha--advogada .tr-marcos{grid-template-columns:1fr 1fr 1.6fr 1.1fr}
  .trilha--advogada .tr-quando{white-space:nowrap}
}
/* "Caso 03 · Educação em proteção infantil" + "Abrir o caso" na mesma linha, dentro do filete */
@media (min-width:1024px){ .proximo-guia{max-width:600px} }

/* =====================================================================
   Acabamento final dos casos (15/10, noite)
   ===================================================================== */

/* --- próximo caso: o mesmo filete fixo do celular também no computador (a barra que enchia parecia contagem
       regressiva); a capa continua subindo com a rolagem (--p) --- */
.proximo-barra{height:1px}
.proximo-barra i{display:none}

/* --- Rogge do Vlog, 02: cada print do @roggedovlog aparece uma vez só na página. O de 5,7 milhões fica grande no
       item 01 (arquivo de 600 px, nítido em tela retina); os outros três ficam no item 02, no lugar do retrato. --- */
.caso--rogge .parede--um{display:flex;justify-content:center}
.caso--rogge .parede--um .parede-item--grande{width:min(66vw, 260px)!important}
.caso--rogge .parede--um .viral .janela{max-width:none;width:100%}
.caso--rogge .parede--um .parede-item--grande .numero-linha{font-size:clamp(2rem, 1.5rem + 2vw, 3rem)!important}
.caso--rogge .parede--um .parede-item--grande .numero-legenda{font-size:15px!important}
@media (min-width:1024px){
  .caso--rogge .momento-parede .parede-texto{grid-column:1 / 7}
  .caso--rogge .parede--um{grid-column:8 / 13;justify-content:center}
  .caso--rogge .parede--um .parede-item--grande{width:300px!important}
}
.item-prints{gap:var(--e4)}
.prints-linha{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e3);align-items:end}
.prints-linha .viral{width:100%;--viral-largura:auto}
.prints-linha .viral .janela{max-width:none;width:100%}
.prints-linha .viral figcaption{margin-top:var(--e3)}
.prints-linha .viral .numero-linha{font-size:clamp(1.25rem, 1rem + 1vw, 2rem)}
.prints-linha .viral .numero-legenda{font-size:13px;color:var(--apoio)}
@media (max-width:1023px){
  .item--prints{grid-template-columns:minmax(0,1fr)}
  .item--prints .item-visual{order:0;width:100%;max-width:480px}
}
@media (min-width:1024px){ .prints-linha{gap:var(--gap)} }
/* próximo caso da Levany: a capa do Rogge do Vlog é o leque de prints reais (o retrato fica só no topo do caso dele) */
@media (max-width:1023px){
  .proximo--rogge .proximo-capa{height:200px}
  .proximo--rogge .proximo-capa-caixa{--print-w:84px;--print-frente:100px}
}

/* --- Levany, topo: a etiqueta de andamento, igual à de Início e Trabalhos --- */
.abertura-andamento{margin:0;font-size:12px;font-weight:500;letter-spacing:.02em;text-transform:uppercase;color:var(--acento)}
@media (min-width:1024px){ .abertura-andamento{font-size:var(--t-mono)} }

/* --- Levany, Os números: legenda de quatro palavras quebra em duas linhas iguais (nenhuma palavra sozinha) --- */
.caso .num-venda .numero-legenda{text-wrap:balance}

/* --- Levany, 04: o botão vem logo depois do texto do item, como nos outros itens. No computador, apoio e botão
       ficam juntos na coluna da direita, com a base alinhada ao título; o palco dos aparelhos fica justo. --- */
.item-fecho{display:flex;flex-direction:column;align-items:flex-start;gap:var(--e3)}
.item-fecho .item-acao{margin-top:0}
@media (min-width:1024px){
  .item--fones .item-texto .item-fecho{grid-column:6 / 10;grid-row:2 / 4;align-self:end;gap:var(--e4)}
  .item--fones .item-texto .item-fecho .texto-apoio{margin:0;align-self:flex-start}
  .caso--levany .lv-fones{padding:var(--e4) var(--e5);container-type:inline-size}
  /* os três aparelhos cabem na coluna em qualquer largura de computador (em 1024 eram 822 px numa coluna de 694) */
  .caso--levany .lv-fones .iphone{--iphone-w:min(250px, calc((100cqw - 2 * var(--e5)) / 3))}
}
/* a faixa dos aparelhos rola no celular: recebe foco pelo teclado (as setas rolam), com o anel por dentro */
.lv-fones:focus-visible{outline-offset:-3px;border-radius:var(--r-painel)}
/* --- celular estreito (até 359 px): a ficha empilha o rótulo em cima do texto e os números da Levany ficam em uma
       coluna (a coluna de 132 a 152 px deixava palavra sozinha); o título do 02 do Rogge cabe sem quebrar o destaque --- */
@media (max-width:359px){
  .ficha-linha{grid-template-columns:minmax(0,1fr);gap:var(--e1)}
  .lv-grade{grid-template-columns:minmax(0,1fr)}
  .caso--rogge .fez-titulo{font-size:1.55rem}
}