/* /who-its-for: visual plano, só cores da marca. Sem JS os 6 painéis ficam empilhados. */
.slices{padding:clamp(2rem,5vw,3.5rem) 0 clamp(2.5rem,6vw,4.5rem);background:var(--white)}
.slices h1{margin:0 0 .4rem;font-size:clamp(2rem,4.5vw,3rem);line-height:1.1;color:var(--navy)}
.slices .lead{max-width:40rem;margin:0 0 2rem;color:var(--muted);font-size:1.1rem}
.slices__stage{display:grid;gap:2.5rem;align-items:start}
.slices__pizzawrap{position:relative;width:min(360px,100%);aspect-ratio:1;margin:0 auto}
/* a vaga da arte fica a 30° do topo; o JS gira o disco em passos de 60° (--rot) até a fatia do papel apontar para o painel (90°) */
.slices__disc{position:absolute;inset:0;transform:rotate(calc(var(--rot,0) * 1deg));transition:transform .7s cubic-bezier(.22,.8,.2,1)}
.slices__pizza{display:block;width:100%;height:100%}
.slices__pizzawrap{cursor:pointer}
/* só o papel escolhido tem etiqueta na pizza: a fatia dele sempre fica à direita (90°) depois do giro */
.slices__label{position:absolute;z-index:1;left:83%;top:50%;transform:translate(-50%,-50%);opacity:0;transition:opacity .2s;padding:.2rem .6rem;border-radius:999px;background:rgba(255,255,255,.94);color:var(--navy);font-weight:700;font-size:.78rem;line-height:1.2;white-space:nowrap;pointer-events:none}
.slices__label.is-on{opacity:1}
.slices__head{display:grid;gap:1.2rem 3rem;align-items:start}
.slices__pick{padding-top:.4rem}
.slices__pick-label{margin:0 0 .6rem;font-weight:700;color:var(--navy)}
.slices__tabs{display:grid;grid-template-columns:repeat(3,auto);gap:.6rem;justify-content:start}
.slices__tabs button{padding:.5rem 1rem;border:2px solid var(--navy);border-radius:999px;background:var(--white);color:var(--navy);font:inherit;font-weight:700;font-size:.92rem;line-height:1.2;cursor:pointer;transition:background .15s,color .15s}
.slices__tabs button:hover{background:#eef2f8}
.slices__tabs button[aria-selected="true"]{background:var(--navy);color:var(--white)}
.slices__tabs button:focus-visible{outline:3px solid var(--green);outline-offset:2px}
@media (min-width:720px){.slices__head{grid-template-columns:minmax(0,1fr) auto}}
html:not(.js) .slices__pick{display:none}
.slices__panels{max-width:none}
.slices__panel{padding:1.4rem 0}
.slices__art{display:flex;align-items:flex-end;justify-content:center;width:210px;height:200px;margin:0 0 1rem}
.slices__art img{display:block;flex:none;max-width:none;width:auto;height:160px}
#panel-migration-lead .slices__art img{height:197px}
.slices__panel h2{margin:0 0 .6rem;font-size:1.6rem;color:var(--navy)}
.slices__pain{margin:0 0 .6rem;color:var(--muted)}
.slices__line{margin:0 0 1.2rem;font-size:1.25rem;font-weight:700;color:var(--ink)}
.slices__list{display:none;list-style:none;margin:0;padding:0}
.slices__foot{margin:2.2rem 0 0;color:var(--muted)}
.slices__foot a{color:var(--blue)}
.slices__store{margin-left:.6rem;font-weight:700}
@media (min-width:720px){.slices__stage{grid-template-columns:360px minmax(0,1fr);gap:3.5rem}}
/* com JS: só o painel ativo; sem JS: a pizza é ilustração e os painéis ficam empilhados */
/* telas largas: o botão sobe para o canto superior direito do painel, na altura do meio do personagem; abaixo disso fica embaixo do texto */
@media (min-width:1100px){
  .slices__panel{display:grid;grid-template-columns:minmax(20rem,32.5rem) auto;column-gap:2rem;align-content:start}
  .slices__panel>*{grid-column:1}
  .slices__panel>.slices__art{grid-row:1}
  .slices__panel>.slices__cta{grid-column:2;grid-row:1;justify-self:end;align-self:center;margin-bottom:1rem}
}
@media (min-width:720px){
  /* os 6 painéis na mesma célula: a altura é a do maior e nada pula; a pizza fica parada no topo */
  .slices__pizzawrap{margin:0}
  .js .slices__panels{display:grid}
  /* troca em sequência: o que sai some em 120 ms; o que entra começa depois e aparece em 200 ms (nunca os dois juntos) */
  .js .slices__panel{grid-area:1/1}
  .js .slices__panel:not(.is-active){visibility:hidden;opacity:0;pointer-events:none;transition:opacity .12s,visibility 0s linear .12s}
  .js .slices__panel.is-active{transition:opacity .2s ease .12s,visibility 0s}
}
html:not(.js) .slices__pizzawrap{cursor:auto}
html:not(.js) .slices__label{display:none}
html:not(.js) .slices__panels{max-width:none}
@media (max-width:719.98px){
  .slices{padding-bottom:6rem} /* folga para o balão do chat não cobrir o botão do papel aberto */
  .slices__pick,.slices__tabs,.slices__pick-label,.slices__panels,.slices__label{display:none}
  .slices__stage{display:block}
  .slices__pizzawrap{width:200px;height:200px;margin:0 auto 1.2rem}
  .slices__disc{width:200px;height:200px}
  .slices__pizza{width:200px;height:200px}
  .slices__list{display:block;list-style:none;margin:0;padding:0}
  .slices__list li{margin:0;padding:0;border-bottom:1px solid var(--line)}
  .slices__list summary{display:flex;align-items:center;gap:.8rem;padding:.5rem 0;cursor:pointer;list-style:none}
  .slices__list summary::-webkit-details-marker{display:none}
  .slices__list summary::marker{content:""}
  .slices__list summary::after{content:"";flex:none;width:.6rem;height:.6rem;margin:0 .4rem 0 auto;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .2s}
  .slices__list details[open] summary::after{transform:rotate(-135deg)}
  .slices__list summary>span{display:flex;flex-direction:column;min-width:0}
  .slices__list summary strong{color:var(--navy);font-size:1.05rem}
  .slices__list summary em{font-style:normal;color:var(--muted);font-size:.92rem}
  .slices__thumb{display:block;flex:none;width:auto;height:72px;max-width:96px;object-fit:contain}
  .slices__body{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 0 1.2rem}
  .slices__big{width:auto;height:160px;max-width:100%;object-fit:contain;margin:0 0 .6rem}
  .slices__list details#role-migration-lead .slices__big{height:197px}
  .slices__body .slices__pain{margin:0 0 1rem}
  .slices__body .button{margin:0}
  html:not(.js) .slices__panels{display:block}
  html:not(.js) .slices__list{display:none}
  html:not(.js) .slices__pizzawrap{display:none}
}
@media (prefers-reduced-motion:reduce){
  .slices__disc,.slices__tabs button,.slices__list summary::after,.slices__panel,.slices__label{transition:none!important}
}