/* Proposta para o Elmer · a linguagem única da Jéssica (dossiê, regra 20): fundo escuro, foto real, cartões de vidro com
   borda em degradê dourado, Cormorant Garamond com itálico dourado + Outfit. A página nasce visível: só esconde o que o JS
   vai animar (html.anima). Tokens iguais aos de inovandocomjessica.com. */
:root{
  --tinta:#17150f; --tinta2:#22201a; --creme:#fbf8f2; --creme2:rgba(251,248,242,.78);
  --ouro:#e7c873; --ouro2:#c8a96c; --ouro3:#a8813c;
  --serif:"Cormorant Garamond",Georgia,serif; --sans:"Outfit",system-ui,sans-serif;
  --raio:22px; --mx:clamp(18px,5vw,72px); --larg:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip;scroll-padding-top:86px}
body{background:var(--tinta);color:var(--creme);font-family:var(--sans);font-weight:300;font-size:17px;line-height:1.6;overflow-x:clip;
  background-image:radial-gradient(1200px 700px at 85% -10%,rgba(200,169,108,.13),transparent 60%),radial-gradient(900px 600px at -10% 40%,rgba(200,169,108,.07),transparent 60%)}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.04;letter-spacing:-.01em}
/* algarismos alinhados: no estilo antigo da Cormorant o 1 lê como I e o 01 como OI */
h1,h2,h3,.num,.mini b,.perguntas b,.marca{font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
h1 i,h2 i{color:var(--ouro);font-style:italic}
h2{font-size:clamp(36px,5.6vw,64px);max-width:18ch}
h3{font-size:clamp(24px,2.4vw,29px)}
b{font-weight:600}
.rotulo{font-weight:500;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--ouro2);margin-bottom:14px}
.lead{color:var(--creme2);max-width:60ch;margin-top:18px;font-size:18px}

/* vidro com borda dourada (a borda é um pseudo-elemento com máscara) */
.card,.vidro{position:relative;border-radius:var(--raio);
  background:linear-gradient(135deg,rgba(255,255,255,.11),rgba(255,255,255,.035));
  -webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);
  box-shadow:0 28px 50px -24px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.18)}
.card::before,.vidro::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:linear-gradient(135deg,rgba(231,200,115,.85),rgba(255,255,255,.1) 42%,rgba(231,200,115,.4));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}

.botoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.botao{display:inline-flex;align-items:center;justify-content:center;text-align:center;min-height:52px;padding:14px 26px;border-radius:999px;border:0;cursor:pointer;
  font:600 16px/1.2 var(--sans);color:var(--tinta);text-decoration:none;background:linear-gradient(135deg,#f3dc98,var(--ouro2) 55%,var(--ouro3));
  box-shadow:0 14px 30px -12px rgba(200,169,108,.65);transition:transform .25s,box-shadow .25s}
.botao:hover{transform:translateY(-2px);box-shadow:0 20px 36px -12px rgba(200,169,108,.8)}
.botao.botao-vidro{color:var(--creme);background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1.5px rgba(231,200,115,.6)}

/* barra de progresso + navegação por etapas */
body::before{content:"";position:fixed;left:0;right:0;top:0;height:82px;z-index:45;pointer-events:none;background:linear-gradient(180deg,var(--tinta) 30%,rgba(23,21,15,0))}
.progresso{position:fixed;left:0;right:0;top:0;height:3px;z-index:60;background:rgba(255,255,255,.06)}
.progresso span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ouro3),var(--ouro));transition:width .15s linear}
.nav{position:fixed;inset:14px var(--mx) auto;z-index:50;display:flex;align-items:center;gap:16px;padding:6px 6px 6px 20px;border-radius:999px;
  background:rgba(23,21,15,.6);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px rgba(231,200,115,.25)}
.marca{display:inline-flex;align-items:center;gap:.28em;min-height:44px;font-family:var(--serif);font-size:23px;font-weight:500;text-decoration:none;white-space:nowrap}
.marca i{color:var(--ouro)}
.etapa-atual{margin-left:auto;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border:0;border-radius:999px;cursor:pointer;
  font:500 15px/1 var(--sans);color:var(--creme);background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(231,200,115,.45)}
.etapa-seta{width:8px;height:8px;border-right:1.5px solid var(--ouro);border-bottom:1.5px solid var(--ouro);transform:translateY(-2px) rotate(45deg);transition:transform .25s}
.etapa-atual[aria-expanded="true"] .etapa-seta{transform:translateY(2px) rotate(-135deg)}
.etapas{position:fixed;top:76px;right:var(--mx);z-index:49;width:min(340px,calc(100vw - 2*var(--mx)));padding:10px;border-radius:20px;
  background:rgba(23,21,15,.96);box-shadow:inset 0 0 0 1px rgba(231,200,115,.3),0 30px 60px -20px #000}
.etapas[hidden]{display:none}
.etapas ol{list-style:none}
.etapas a{display:flex;align-items:center;gap:14px;min-height:46px;padding:0 12px;border-radius:12px;text-decoration:none;color:var(--creme2)}
.etapas a b{flex:0 0 28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--ouro);box-shadow:inset 0 0 0 1px rgba(231,200,115,.5)}
.etapas a:hover,.etapas a.atual{background:rgba(231,200,115,.1);color:var(--creme)}
.etapas a.atual b{background:var(--ouro);color:var(--tinta)}

/* capa */
.capa{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center;max-width:var(--larg);margin:0 auto;padding:110px var(--mx) 40px}
.capa h1{font-size:clamp(40px,5vw,68px);max-width:16ch}
.selo{display:inline-flex;align-items:center;gap:10px;padding:9px 16px;border-radius:999px;font-size:14px;color:var(--creme2);margin-bottom:24px}
.ponto-ouro{width:8px;height:8px;border-radius:50%;background:var(--ouro);box-shadow:0 0 0 4px rgba(231,200,115,.18)}
.capa-cena{position:relative;height:min(76vh,700px);min-height:480px}
.aura{position:absolute;left:12%;top:6%;width:76%;height:84%;border-radius:50%;background:radial-gradient(circle,rgba(200,169,108,.3),transparent 65%);filter:blur(30px)}
.capa-foto{position:absolute;left:50%;bottom:0;height:100%;width:auto;max-width:none;transform:translateX(-50%);
  -webkit-mask-image:radial-gradient(ellipse closest-side at 50% 50%,#000 58%,transparent 100%);mask-image:radial-gradient(ellipse closest-side at 50% 50%,#000 58%,transparent 100%)}
.flutua{position:absolute;z-index:3}
.flutua .mini{display:flex;flex-direction:column;padding:12px 18px;animation:boia 7s ease-in-out infinite;background:linear-gradient(135deg,rgba(23,21,15,.78),rgba(23,21,15,.6))}
.flutua.f1{left:-4%;top:18%}.flutua.f2{right:-2%;top:44%}.flutua.f3{left:2%;bottom:14%}
.flutua.f2 .mini{animation-delay:-2.5s}.flutua.f3 .mini{animation-delay:-5s}
.mini b{font-family:var(--serif);font-size:42px;line-height:1;color:var(--ouro);font-weight:500}
.mini span{font-size:13px;color:var(--creme2);white-space:nowrap}
@keyframes boia{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* etapas */
.etapa{max-width:var(--larg);margin:0 auto;padding:clamp(70px,9vw,120px) var(--mx) 30px}
.grade{display:grid;gap:18px;margin-top:40px}
.g3{grid-template-columns:repeat(3,1fr)}
.item{padding:28px 26px 26px}
.item h3{margin:16px 0 8px}
.item p{color:var(--creme2);font-size:16px}
.ic{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:600 18px/1 var(--sans);color:var(--tinta);
  background:radial-gradient(circle at 35% 30%,#f3dc98,var(--ouro2) 60%,var(--ouro3));box-shadow:0 6px 14px rgba(0,0,0,.35)}
.item.destaque{background:linear-gradient(135deg,rgba(231,200,115,.2),rgba(231,200,115,.05))}
.proximo{display:flex;align-items:center;justify-content:center;gap:12px;width:fit-content;min-height:52px;margin:44px auto 0;padding:0 26px;border-radius:999px;
  text-decoration:none;font-weight:500;color:var(--ouro);box-shadow:inset 0 0 0 1.5px rgba(231,200,115,.5);transition:background .25s}
.proximo::after{content:"";width:9px;height:9px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-3px) rotate(45deg)}
.proximo:hover{background:rgba(231,200,115,.1)}

.ouvi-topo{display:grid;grid-template-columns:1fr 300px;gap:40px;align-items:center}
.nos{position:relative}
.nos img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 14%;
  -webkit-mask-image:radial-gradient(ellipse closest-side at 50% 50%,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse closest-side at 50% 50%,#000 60%,transparent 100%)}
/* faixa clara: a foto do terno branco funde no próprio cinza-claro do estúdio (medido nos cantos: 212 a 240) */
.faixa{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;margin-top:clamp(60px,8vw,110px);overflow:hidden;
  background:linear-gradient(180deg,#d6d6d6,#eeeeee);color:var(--tinta)}
.faixa-texto{padding:60px var(--mx);max-width:640px;justify-self:end}
.faixa-frase{font-family:var(--serif);font-weight:500;font-size:clamp(36px,4.6vw,62px);line-height:1.04;letter-spacing:-.01em}
.faixa-frase i{color:#6f531d}
.faixa-sub{margin-top:20px;font-size:18px;color:#3d3a33;max-width:40ch}
.faixa-foto{height:min(86vh,780px);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 22%,#000 88%,transparent)}
.faixa-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 38%}

/* 2 · passos */
.passos{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}
.passos li{padding:26px 22px}
.num{font-family:var(--serif);font-size:44px;line-height:1;color:var(--ouro)}
.passos h3{margin:12px 0 8px}
.passos p{color:var(--creme2);font-size:16px}
.precisa{margin-top:22px;padding:26px 28px}
.precisa h3{margin-bottom:14px}
.checks{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:10px 28px}
.checks li{position:relative;padding-left:30px;color:var(--creme2)}
.checks li::before{content:"";position:absolute;left:2px;top:6px;width:14px;height:8px;border-left:2px solid var(--ouro);border-bottom:2px solid var(--ouro);transform:rotate(-45deg)}

/* 3 · abas */
.abas{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px}
.abas button{min-height:46px;padding:0 18px;border:0;border-radius:999px;cursor:pointer;font:500 15px/1 var(--sans);color:var(--creme2);
  background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(231,200,115,.3);transition:background .2s,color .2s}
.abas button[aria-selected="true"]{color:var(--tinta);background:linear-gradient(135deg,#f3dc98,var(--ouro2));box-shadow:none}
.painel{margin-top:18px;padding:30px 30px 26px}
.painel[hidden]{display:none}
.painel-topo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.painel-topo h3{font-size:clamp(28px,3vw,38px)}
.porque{color:var(--creme2);margin-top:10px;max-width:70ch}
.entregas{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:22px}
.entregas div{padding:16px 18px;border-radius:14px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(231,200,115,.14)}
.entregas dt{font-weight:500}
.entregas dd{color:var(--creme2);font-size:15px;margin-top:4px}
.entregas dd::before{content:"Resolve: ";color:var(--ouro2)}
.link-etapa{margin-top:18px}
.link-etapa a{display:inline-flex;align-items:center;min-height:44px;color:var(--ouro)}
.chip{display:inline-block;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:500;line-height:1.3;color:var(--creme2);background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.chip.alta{color:var(--tinta);background:var(--ouro);box-shadow:none}
.chip.media{color:var(--ouro);box-shadow:inset 0 0 0 1px rgba(231,200,115,.55);background:transparent}
.chip.ia{color:var(--ouro);background:rgba(231,200,115,.12);box-shadow:inset 0 0 0 1px rgba(231,200,115,.5)}

/* 4 · tecnologia */
.filtros{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.filtros button{min-height:44px;padding:0 18px;border:0;border-radius:999px;cursor:pointer;font:500 15px/1 var(--sans);color:var(--creme2);background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(231,200,115,.3)}
.filtros button.ativo{color:var(--tinta);background:var(--ouro);box-shadow:none}
.tec{margin-top:22px}
.tec .item h3{margin-top:14px}
.tec .item[hidden]{display:none}
.mede{margin-top:12px;font-size:14px !important;color:var(--ouro2) !important}
.nota{margin-top:24px;padding:20px 24px;color:var(--creme2);font-size:16px;max-width:none}
.nota b{color:var(--creme)}
p.nota:not(.vidro){padding:0;margin-top:20px;font-size:15px}

/* 5 · receitas */
.lista-receitas{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:40px}
.receita{padding:24px 26px}
.receita .ativo{margin-top:14px;font-size:14px;color:var(--ouro2);letter-spacing:.02em}
.receita h3{margin:6px 0 12px}
.receita p{color:var(--creme2);font-size:16px}
.receita p+p{margin-top:4px}
.receita p b{color:var(--creme)}
.chip.curto{color:var(--tinta);background:var(--ouro);box-shadow:none}
.chip.medio{color:var(--ouro);background:transparent;box-shadow:inset 0 0 0 1px rgba(231,200,115,.55)}
.chip.longo{color:var(--creme2)}

/* 6 · linha do tempo */
.linha{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px;counter-reset:l}
.linha>li{padding:26px 22px}
.quando{display:block;font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ouro)}
.linha h3{margin:8px 0 14px}
.linha ul{list-style:none;display:grid;gap:10px}
.linha ul li{position:relative;padding-left:18px;color:var(--creme2);font-size:15px;line-height:1.45}
.linha ul li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--ouro2)}

/* 7 · sanfona */
.sanfona{display:grid;gap:12px;margin-top:36px;max-width:860px}
.sanfona details{border-radius:18px}
.sanfona summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;padding:14px 22px;cursor:pointer;
  font-family:var(--serif);font-size:clamp(22px,2.2vw,26px);font-weight:500}
.sanfona summary::-webkit-details-marker{display:none}
.sanfona summary::before{content:"✕";flex:0 0 32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:500 14px/1 var(--sans);color:var(--ouro);box-shadow:inset 0 0 0 1px rgba(231,200,115,.5);order:-1}
.sanfona summary::after{content:"";flex:0 0 9px;height:9px;margin-left:auto;border-right:1.5px solid var(--ouro);border-bottom:1.5px solid var(--ouro);transform:rotate(45deg);transition:transform .25s}
.sanfona details[open] summary::after{transform:rotate(-135deg)}
.sanfona details p{padding:0 22px 0 70px;color:var(--creme2);font-size:16px}
.sanfona details p:last-child{padding-bottom:20px}
.sanfona details p b{color:var(--creme)}

/* os passos: uma trilha vertical; a linha dourada enche conforme a rolagem (--enche, pelo app.js) */
.passos-grade{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start}
.passos-cabeca{position:sticky;top:120px}
.passos-grade .trilha{margin-top:0}
.trilha{list-style:none;position:relative;display:grid;gap:14px;margin-top:40px;max-width:860px;--enche:0}
.trilha::before,.trilha::after{content:"";position:absolute;left:47px;top:40px;bottom:40px;width:2px;border-radius:2px}
.trilha::before{background:rgba(231,200,115,.18)}
.trilha::after{background:linear-gradient(180deg,var(--ouro),var(--ouro3));transform-origin:top;transform:scaleY(var(--enche))}
.passo{display:flex;align-items:flex-start;gap:22px;padding:22px 26px 22px 22px;z-index:1}
.bolinha{position:relative;z-index:2;flex:0 0 52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font:600 20px/1 var(--sans);color:var(--tinta);background:radial-gradient(circle at 35% 30%,#f3dc98,var(--ouro2) 60%,var(--ouro3));box-shadow:0 0 0 6px var(--tinta2),0 8px 18px rgba(0,0,0,.4)}
.passo h3{margin:4px 0 6px}
.passo p{color:var(--creme2);font-size:16px}
.passo:first-child{background:linear-gradient(135deg,rgba(231,200,115,.2),rgba(231,200,115,.05))}
/* trilha viva (só com JS): o passo acende quando a linha chega nele */
.passo{transition:opacity .45s ease}
.bolinha{transition:background .4s,color .4s,box-shadow .4s}
.trilha.viva .passo:not(.aceso){opacity:.5}
.trilha.viva .passo:not(.aceso) .bolinha{background:var(--tinta2);color:var(--ouro);box-shadow:inset 0 0 0 1.5px rgba(231,200,115,.55),0 0 0 6px var(--tinta2)}
.trilha.viva .passo.aceso .bolinha{animation:acende .7s ease-out}
@keyframes acende{0%{box-shadow:0 0 0 6px var(--tinta2),0 0 0 6px rgba(231,200,115,.6)}100%{box-shadow:0 0 0 6px var(--tinta2),0 0 0 24px rgba(231,200,115,0)}}

/* a pergunta dos 5 anos: tela inteira, as palavras acendem conforme a rolagem (sem JS, tudo aceso) */
.pergunta{max-width:var(--larg);margin:0 auto;min-height:min(88vh,820px);display:flex;flex-direction:column;justify-content:center;
  padding:clamp(80px,10vw,140px) var(--mx);text-align:center;align-items:center}
.pergunta-texto{font-family:var(--serif);font-weight:500;font-size:clamp(34px,5.2vw,70px);line-height:1.12;letter-spacing:-.01em;max-width:22ch}
.pergunta-texto i{color:var(--ouro)}
.pergunta-texto .pl{transition:opacity .35s ease,filter .35s ease}
.pergunta-texto.viva .pl:not(.acesa){opacity:.16;filter:blur(1.5px)}

/* 8 · formatos */
.formatos{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}
.formato{padding:26px 22px}
.formato h3{margin:14px 0 10px}
.formato p{color:var(--creme2);font-size:16px}
.formato.principal{background:linear-gradient(135deg,rgba(231,200,115,.22),rgba(231,200,115,.05))}

/* 9 · fecho */
.fecho{display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:end;padding-bottom:0}
.perguntas{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:32px}
.perguntas li{padding:20px 22px}
.perguntas b{display:block;font-family:var(--serif);font-size:26px;font-weight:500;color:var(--ouro)}
.perguntas span{display:block;color:var(--creme2);font-size:16px;margin-top:4px}
.fecho-foto{overflow:hidden}
.fecho-foto img{width:100%;max-width:480px;margin-left:auto;
  -webkit-mask-image:radial-gradient(ellipse closest-side at 50% 50%,#000 58%,transparent 100%);mask-image:radial-gradient(ellipse closest-side at 50% 50%,#000 58%,transparent 100%)}
.fecho .botoes{margin-bottom:60px}

.rodape{text-align:center;padding:40px var(--mx) 50px;border-top:1px solid rgba(231,200,115,.15);color:var(--creme2);font-size:15px}
.rodape .marca{justify-content:center;font-size:28px;color:var(--creme)}
.pequeno{font-size:13px;opacity:.75;margin-top:6px}

/* capa entra ao abrir (se a animação não rodar, tudo já está visível) */
@keyframes sobe{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes surge{from{opacity:0;transform:scale(1.05)}to{opacity:1;transform:none}}
.capa-texto>*{animation:sobe .9s cubic-bezier(.2,.7,.2,1) both}
.capa-texto>:nth-child(2){animation-delay:.12s}.capa-texto>:nth-child(3){animation-delay:.26s}.capa-texto>:nth-child(4){animation-delay:.4s}
.capa-cena{animation:surge 1.2s cubic-bezier(.2,.7,.2,1) both}
.flutua.f1{animation:sobe .8s .6s both}.flutua.f2{animation:sobe .8s .8s both}.flutua.f3{animation:sobe .8s 1s both}

/* revelar ao rolar: só quando o JS confirma que pode animar (html.anima) */
html.anima .revela{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
html.anima .revela.visto{opacity:1;transform:none}

/* tablet */
@media (max-width:1020px){
  .passos-grade{grid-template-columns:1fr;gap:0}
  .passos-cabeca{position:static}
  .passos-grade .trilha{margin-top:40px}
  .g3,.lista-receitas{grid-template-columns:repeat(2,1fr)}
  .passos,.linha,.formatos{grid-template-columns:repeat(2,1fr)}
}
/* celular */
@media (max-width:720px){
  body{font-size:16px}
  .nav{padding-left:16px}
  .marca{font-size:21px}
  .etapa-atual{padding:0 14px;font-size:14px}
  .capa{grid-template-columns:1fr;padding-top:96px;gap:8px}
  .capa-cena{height:460px;min-height:0;margin-top:20px}
  .capa h1{font-size:clamp(34px,9.6vw,44px)}
  .capa .lead{font-size:16px;margin-top:14px}
  .capa .botoes{margin-top:22px}
  .selo{margin-bottom:16px}
  .flutua.f1{left:0;top:10%}.flutua.f2{right:0;top:40%}.flutua.f3{left:0;bottom:10%}
  .mini b{font-size:34px}
  .g3,.lista-receitas,.passos,.linha,.formatos,.entregas,.perguntas,.checks{grid-template-columns:1fr}
  .painel{padding:24px 20px}
  .abas{flex-wrap:nowrap;overflow-x:auto;margin-left:calc(-1*var(--mx));margin-right:calc(-1*var(--mx));padding:2px var(--mx) 6px;scrollbar-width:none}
  .abas::-webkit-scrollbar{display:none}
  .abas button{flex:0 0 auto}
  .sanfona details p{padding-left:22px}
  .fecho{grid-template-columns:1fr}
  .faixa{grid-template-columns:1fr}
  .faixa-texto{justify-self:start;padding:34px var(--mx) 44px;order:2}
  .faixa-foto{height:520px;-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent)}
  .faixa-sub{font-size:16px}
  .passo{gap:16px;padding:20px 18px 20px 16px}
  .bolinha{flex-basis:44px;height:44px;font-size:18px}
  .trilha::before,.trilha::after{left:37px}
  .ouvi-topo{grid-template-columns:1fr;gap:26px}
  .nos{max-width:280px;margin:0 auto}
  .fecho-foto img{margin:0 auto;max-width:340px}
  .fecho .botoes{margin-bottom:30px}
  .fecho .botao{width:100%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .flutua .mini{animation:none}
  .capa-texto>*,.capa-cena,.flutua{animation:none!important}
  .trilha.viva .passo:not(.aceso){opacity:1}
  .pergunta-texto.viva .pl:not(.acesa){opacity:1;filter:none}
  html.anima .revela{opacity:1;transform:none;transition:none}
}