/* =========================================================
   Difference console — editorial tabs + panel
   Overrides older difference styles from styles/ui-polish/motion-*
   ========================================================= */

.difference-console{
  position:relative!important;
  display:grid!important;
  grid-template-columns:minmax(0,36%) minmax(0,64%)!important;
  grid-template-rows:repeat(4,minmax(0,1fr))!important;
  align-items:stretch!important;
  min-height:0!important;
  max-height:none!important;
  height:auto!important;
  border:1px solid rgba(17,17,17,.1)!important;
  border-radius:14px!important;
  overflow:hidden!important;
  background:#f6f2eb!important;
  box-shadow:
    0 1px 2px rgba(17,17,17,.04),
    0 10px 28px rgba(40,28,18,.07)!important;
}

.difference-item{
  display:contents;
}

/* ---- Left options ---- */
.difference-tab{
  position:relative!important;
  isolation:isolate;
  grid-column:1!important;
  display:grid!important;
  grid-template-columns:2rem 1fr!important;
  align-items:center!important;
  gap:.65rem!important;
  width:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:.72rem .9rem .72rem .85rem!important;
  border:0!important;
  border-bottom:1px solid rgba(17,17,17,.1)!important;
  border-left:3px solid transparent!important;
  border-radius:0!important;
  background:#f6f2eb!important;
  color:#15110e!important;
  text-align:left!important;
  cursor:pointer!important;
  box-shadow:none!important;
  transform:none!important;
  transition:border-color .25s ease,color .25s ease!important;
  overflow:hidden!important;
}
.difference-item:nth-child(1) .difference-tab{grid-row:1!important}
.difference-item:nth-child(2) .difference-tab{grid-row:2!important}
.difference-item:nth-child(3) .difference-tab{grid-row:3!important}
.difference-item:nth-child(4) .difference-tab{grid-row:4!important}
.difference-item:last-child .difference-tab{border-bottom:0!important}

/* Desliga pseudos legados de styles.css (barra/wipe antigos) */
.difference-tab::before,
.difference-tab::after{
  display:none!important;
  content:none!important;
  animation:none!important;
}

/* Fill preto animado (cima → baixo) — só transform + clip, sem keyframes legados */
.difference-tab__fill{
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  display:block!important;
  background:#151310!important;
  transform:scaleY(0)!important;
  transform-origin:top center!important;
  transition:
    transform .38s cubic-bezier(.22,1,.36,1)!important,
    opacity .28s ease!important;
  transition-duration:.38s!important;
  pointer-events:none!important;
  opacity:1!important;
  width:auto!important;
  height:auto!important;
  animation:none!important;
  will-change:transform;
  backface-visibility:hidden;
}
.difference-tab.is-active .difference-tab__fill,
.difference-tab.is-active:not(.is-leaving) .difference-tab__fill{
  transform:scaleY(1)!important;
  animation:none!important;
}
.difference-tab.is-leaving .difference-tab__fill,
.difference-tab:not(.is-active) .difference-tab__fill{
  transform:scaleY(0)!important;
  animation:none!important;
}

/* Trilha + barra de progresso do ciclo automático */
.difference-tab__track{
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  height:3px!important;
  z-index:8!important;
  display:block!important;
  background:rgba(255,255,255,.16)!important;
  opacity:0!important;
  pointer-events:none!important;
  transition:opacity .2s ease!important;
  width:auto!important;
  transform:none!important;
  animation:none!important;
}
.difference-tab.is-active .difference-tab__track{
  opacity:1!important;
}
.difference-tab__bar{
  position:absolute!important;
  left:0!important;
  bottom:0!important;
  top:auto!important;
  right:auto!important;
  height:3px!important;
  width:0!important;
  max-width:100%!important;
  z-index:9!important;
  display:block!important;
  background:#ff6a00!important;
  box-shadow:0 0 10px rgba(255,106,0,.45)!important;
  pointer-events:none!important;
  transform:none!important;
  animation:none!important;
  opacity:1!important;
}

.difference-tab__n{
  position:relative;
  z-index:2;
  grid-column:1;
  color:#9a9288!important;
  font-size:.68rem!important;
  font-weight:700!important;
  letter-spacing:.08em!important;
  line-height:1!important;
  transition:color .25s ease;
}
.difference-tab__copy{
  position:relative;
  z-index:2;
  grid-column:2;
  min-width:0;
  transform:none!important;
}
.difference-tab__copy strong{
  display:block;
  font:650 .88rem/1.2 var(--display,Inter,system-ui,sans-serif)!important;
  letter-spacing:-.02em;
  color:#15110e!important;
  transition:color .2s ease;
}
.difference-tab__copy small{
  display:block;
  margin-top:.18rem;
  font-size:.72rem!important;
  line-height:1.3!important;
  color:#6a635b!important;
  font-weight:450!important;
}

/* inactive hover */
@media (hover:hover) and (pointer:fine){
  .difference-tab:hover:not(.is-active):not(.is-leaving){
    background:#efe9e0!important;
  }
  .difference-tab:hover:not(.is-active) .difference-tab__copy strong{
    color:#0e0c0a!important;
  }
  .difference-tab:hover .difference-tab__copy{
    transform:none!important;
  }
}

/* active — fill anima o fundo; borda lateral marca o estado */
.difference-tab.is-active{
  background:transparent!important;
  border-left-color:#ff6a00!important;
  color:#fff!important;
}
.difference-tab.is-active .difference-tab__n{
  color:#ff6a00!important;
}
.difference-tab.is-active .difference-tab__copy strong,
.difference-tab.is-active .difference-tab__copy small{
  color:#fff!important;
}
.difference-tab.is-active .difference-tab__copy small{
  color:rgba(255,255,255,.72)!important;
}
.difference-tab.is-leaving{
  color:rgba(21,17,14,.45)!important;
}
.difference-tab:focus-visible{
  outline:2px solid #ff6a00;
  outline-offset:-2px;
  z-index:3;
}

/* ---- Right panel ---- */
.difference-panel{
  grid-column:2!important;
  grid-row:1 / -1!important;
  position:relative!important;
  inset:auto!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
  align-items:stretch!important;
  place-items:unset!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-width:none!important;
  margin:0!important;
  padding:clamp(1.1rem,2vw,1.45rem) clamp(1.15rem,2.2vw,1.75rem)!important;
  background:#faf8f4!important;
  border-left:1px solid rgba(17,17,17,.08)!important;
  box-shadow:none!important;
  animation:none!important;
  opacity:1;
  transform:none;
  z-index:1;
}
.difference-panel[hidden]{
  display:none!important;
}

/* Entrada/saída: slide horizontal + fade + blur leve (mascara crossfade) */
.difference-panel.is-enter{
  animation:diffPanelInNext .42s cubic-bezier(.22,1,.36,1) both!important;
  animation-duration:.42s!important;
}
.difference-panel.is-enter.is-from-prev{
  animation-name:diffPanelInPrev!important;
}
.difference-panel.is-enter.is-from-next{
  animation-name:diffPanelInNext!important;
}
/* Saída: slide oposto (mantém altura do console) */
.difference-panel.is-exit{
  position:absolute!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  left:36%!important;
  width:auto!important;
  height:auto!important;
  grid-column:auto!important;
  grid-row:auto!important;
  display:flex!important;
  z-index:2!important;
  pointer-events:none!important;
  animation:diffPanelOutNext .32s cubic-bezier(.4,0,.2,1) both!important;
  animation-duration:.32s!important;
}
.difference-panel.is-exit.is-to-prev{
  animation-name:diffPanelOutPrev!important;
}
.difference-panel.is-exit.is-to-next{
  animation-name:diffPanelOutNext!important;
}

/* Stagger do conteúdo ao entrar */
.difference-panel.is-enter .diff-panel__kicker,
.difference-panel.is-enter .diff-panel__title,
.difference-panel.is-enter h3,
.difference-panel.is-enter .diff-panel__desc,
.difference-panel.is-enter > p:not(.diff-panel__kicker),
.difference-panel.is-enter .diff-panel__points li,
.difference-panel.is-enter .diff-panel__list li{
  animation:diffChildIn .4s cubic-bezier(.22,1,.36,1) both!important;
  animation-duration:.4s!important;
}
.difference-panel.is-enter .diff-panel__kicker{animation-delay:40ms!important}
.difference-panel.is-enter .diff-panel__title,
.difference-panel.is-enter h3{animation-delay:70ms!important}
.difference-panel.is-enter .diff-panel__desc,
.difference-panel.is-enter > p:not(.diff-panel__kicker){animation-delay:100ms!important}
.difference-panel.is-enter .diff-panel__points li:nth-child(1),
.difference-panel.is-enter .diff-panel__list li:nth-child(1){animation-delay:140ms!important}
.difference-panel.is-enter .diff-panel__points li:nth-child(2),
.difference-panel.is-enter .diff-panel__list li:nth-child(2){animation-delay:175ms!important}
.difference-panel.is-enter .diff-panel__points li:nth-child(3),
.difference-panel.is-enter .diff-panel__list li:nth-child(3){animation-delay:210ms!important}
.difference-panel.is-enter .diff-panel__points li:nth-child(4),
.difference-panel.is-enter .diff-panel__list li:nth-child(4){animation-delay:245ms!important}
.difference-panel.is-enter .diff-panel__points li:nth-child(n+5),
.difference-panel.is-enter .diff-panel__list li:nth-child(n+5){animation-delay:280ms!important}

@keyframes diffPanelInNext{
  from{
    opacity:0;
    transform:translate3d(22px,0,0);
    filter:blur(3px);
  }
  to{
    opacity:1;
    transform:translate3d(0,0,0);
    filter:blur(0);
  }
}
@keyframes diffPanelInPrev{
  from{
    opacity:0;
    transform:translate3d(-22px,0,0);
    filter:blur(3px);
  }
  to{
    opacity:1;
    transform:translate3d(0,0,0);
    filter:blur(0);
  }
}
@keyframes diffPanelOutNext{
  from{
    opacity:1;
    transform:translate3d(0,0,0);
    filter:blur(0);
  }
  to{
    opacity:0;
    transform:translate3d(-14px,0,0);
    filter:blur(2px);
  }
}
@keyframes diffPanelOutPrev{
  from{
    opacity:1;
    transform:translate3d(0,0,0);
    filter:blur(0);
  }
  to{
    opacity:0;
    transform:translate3d(14px,0,0);
    filter:blur(2px);
  }
}
@keyframes diffChildIn{
  from{
    opacity:0;
    transform:translate3d(0,8px,0);
  }
  to{
    opacity:1;
    transform:translate3d(0,0,0);
  }
}

.diff-panel__kicker{
  margin:0 0 .5rem!important;
  color:#ff6a00!important;
  font-size:.65rem!important;
  font-weight:700!important;
  letter-spacing:.12em!important;
  text-transform:uppercase!important;
  line-height:1.2!important;
}
.difference-panel h3,
.diff-panel__title{
  margin:0 0 .5rem!important;
  max-width:24ch;
  font:650 clamp(1.15rem,1.8vw,1.4rem)/1.18 var(--display,Inter,system-ui,sans-serif)!important;
  letter-spacing:-.03em!important;
  color:#15110e!important;
}
.difference-panel > p:not(.diff-panel__kicker),
.diff-panel__desc{
  margin:0 0 1rem!important;
  max-width:34rem;
  color:#5f574e!important;
  font-size:.88rem!important;
  line-height:1.5!important;
  font-weight:450!important;
}

/* Editorial points — no pills, no cards, no buttons */
.diff-panel__points,
.diff-panel__list{
  list-style:none!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  flex-direction:column!important;
  gap:0!important;
  max-width:28rem;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.diff-panel__points li,
.diff-panel__list li{
  position:relative!important;
  display:grid!important;
  grid-template-columns:2rem 1fr!important;
  align-items:baseline!important;
  gap:.5rem!important;
  margin:0!important;
  padding:.55rem 0!important;
  border:0!important;
  border-bottom:1px solid rgba(17,17,17,.1)!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#15110e!important;
  font-size:.86rem!important;
  font-weight:500!important;
  line-height:1.35!important;
}
.diff-panel__points li:first-child,
.diff-panel__list li:first-child{
  padding-top:0!important;
}
.diff-panel__points li:last-child,
.diff-panel__list li:last-child{
  padding-bottom:0!important;
  border-bottom:0!important;
}
.diff-panel__points li::before,
.diff-panel__list li::before{
  display:none!important;
  content:none!important;
}
.diff-panel__point-n{
  color:#ff6a00!important;
  font-size:.68rem!important;
  font-weight:700!important;
  letter-spacing:.06em!important;
  line-height:1.35!important;
}
.diff-panel__point-t{
  color:#15110e!important;
  font-size:.86rem!important;
  font-weight:550!important;
  letter-spacing:-.015em!important;
  line-height:1.35!important;
}

/* kill legacy tall mins from styles.css */
.difference-console,
.difference-stage,
.difference-tab{
  min-height:0!important;
}

/* hide leftover art systems */
.difference .clarity-map,
.difference-panel .clarity-map,
.performance-system,
.conversation-system,
.agility-system{
  display:none!important;
}

/* ---- Tablet ---- */
@media (max-width:960px){
  .difference-console{
    grid-template-columns:minmax(0,38%) minmax(0,62%)!important;
    min-height:0!important;
  }
  .difference-tab{
    padding:.65rem .8rem .65rem .75rem!important;
    gap:.55rem!important;
  }
  .difference-tab__copy strong{font-size:.82rem!important}
  .difference-tab__copy small{font-size:.7rem!important}
  .difference-panel{
    padding:1.1rem 1.15rem!important;
  }
  .difference-panel.is-exit{
    left:38%!important;
  }
}

/* ---- Mobile: accordion (content under option) ---- */
@media (max-width:720px){
  .difference-console{
    display:flex!important;
    flex-direction:column!important;
    grid-template-columns:none!important;
    grid-template-rows:none!important;
    min-height:0!important;
  }
  .difference-item{
    display:flex!important;
    flex-direction:column!important;
    border-bottom:1px solid rgba(17,17,17,.1)!important;
  }
  .difference-item:last-child{border-bottom:0!important}

  .difference-tab{
    grid-column:auto!important;
    grid-row:auto!important;
    flex:0 0 auto!important;
    min-height:auto!important;
    border-bottom:0!important;
    border-left:3px solid transparent!important;
  }
  .difference-item.is-active .difference-tab{
    border-left-color:#ff6a00!important;
  }

  .difference-panel{
    grid-column:auto!important;
    grid-row:auto!important;
    position:relative!important;
    height:auto!important;
    min-height:0!important;
    border-left:0!important;
    border-top:1px solid rgba(17,17,17,.08)!important;
    padding:.95rem 1rem 1.1rem 1.1rem!important;
    background:#faf8f4!important;
  }
  /* no mobile, saída não precisa de overlay absoluto na coluna direita */
  .difference-panel.is-exit,
  .difference-panel.is-exit.is-to-next,
  .difference-panel.is-exit.is-to-prev{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    inset:auto!important;
    animation:diffPanelOutMobile .28s ease both!important;
  }
  .difference-panel.is-enter,
  .difference-panel.is-enter.is-from-next,
  .difference-panel.is-enter.is-from-prev{
    animation:diffPanelInMobile .36s cubic-bezier(.22,1,.36,1) both!important;
  }
  .difference-panel h3,
  .diff-panel__title{
    max-width:none;
    font-size:clamp(1.2rem,5.5vw,1.45rem)!important;
  }
  .difference-panel > p:not(.diff-panel__kicker),
  .diff-panel__desc{
    margin-bottom:1.25rem!important;
    font-size:.94rem!important;
  }
  .diff-panel__points li,
  .diff-panel__list li{
    padding:.9rem 0!important;
  }
}

@keyframes diffPanelOutMobile{
  from{opacity:1;transform:none;filter:none}
  to{opacity:0;transform:translateY(8px);filter:blur(1px)}
}
@keyframes diffPanelInMobile{
  from{opacity:0;transform:translateY(10px);filter:blur(2px)}
  to{opacity:1;transform:none;filter:none}
}

/* Marketing motion: keep short enter/exit even if OS reduce-motion
   (global * { transition-duration:.01ms } is overridden via longhands below) */
@media (prefers-reduced-motion:reduce){
  .difference-tab__fill,
  .difference-tab.is-active .difference-tab__fill,
  .difference-tab.is-leaving .difference-tab__fill,
  .difference-tab:not(.is-active) .difference-tab__fill{
    transition:
      transform .28s cubic-bezier(.22,1,.36,1)!important;
    transition-duration:.28s!important;
    animation:none!important;
  }
  .difference-tab.is-active .difference-tab__fill{
    transform:scaleY(1)!important;
  }
  .difference-tab:not(.is-active) .difference-tab__fill,
  .difference-tab.is-leaving .difference-tab__fill{
    transform:scaleY(0)!important;
  }
  .difference-panel.is-enter{
    animation:diffPanelInNext .28s ease both!important;
    animation-duration:.28s!important;
    filter:none!important;
  }
  .difference-panel.is-exit{
    animation:diffPanelOutNext .22s ease both!important;
    animation-duration:.22s!important;
    filter:none!important;
  }
  .difference-panel.is-enter .diff-panel__kicker,
  .difference-panel.is-enter .diff-panel__title,
  .difference-panel.is-enter h3,
  .difference-panel.is-enter .diff-panel__desc,
  .difference-panel.is-enter > p:not(.diff-panel__kicker),
  .difference-panel.is-enter .diff-panel__points li,
  .difference-panel.is-enter .diff-panel__list li{
    animation:none!important;
    opacity:1!important;
    transform:none!important;
  }
}