/* =========================================================
   ZeroTicket — Hero Carousel V2
   Arquivo isolado da landing principal
   ========================================================= */

.hero-carousel-v2{
  height:560px;
  position:relative;
  perspective:none;
  isolation:isolate;
}

.hero-carousel-v2::before{
  content:'';
  position:absolute;
  inset:5% -2% 8%;
  background:radial-gradient(ellipse,#ddefc3,transparent 68%);
  z-index:-2;
}

.hero-carousel-viewport{
  position:absolute;
  inset:0 0 52px;
  overflow:hidden;
  border-radius:24px;
}

.hero-carousel-track{
  width:300%;
  height:100%;
  display:flex;
  transform:translate3d(0,0,0);
  transition:transform .9s cubic-bezier(.22,.75,.18,1);
  will-change:transform;
}

.hero-carousel-slide{
  position:relative;
  flex:0 0 33.333333%;
  width:33.333333%;
  height:100%;
  overflow:hidden;
}

/* O primeiro slide preserva o visual original */
.slide-atendimento .mini-dashboard{
  top:82px;
}

.slide-atendimento .floating-note{
  top:38px;
}

.slide-atendimento .floating-ticket{
  bottom:7px;
}

.slide-atendimento .floating-call{
  bottom:45px;
}

/* Navegação pequena, fora da interface */
.hero-carousel-nav{
  position:absolute;
  left:50%;
  bottom:2px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:4px;
  padding:4px;
  border:1px solid #d9e4d8;
  border-radius:999px;
  background:#ffffffee;
  box-shadow:0 8px 22px #123b2f16;
  backdrop-filter:blur(10px);
  z-index:20;
  user-select:none;
}

.hero-carousel-nav button{
  appearance:none;
  border:0;
  background:transparent;
  color:#748579;
  border-radius:999px;
  padding:6px 10px;
  display:flex;
  align-items:center;
  gap:5px;
  font-size:9px;
  line-height:1;
  font-weight:750;
  cursor:pointer;
  transition:background .2s,color .2s,transform .2s;
}

.hero-carousel-nav button i{
  width:5px;
  height:5px;
  border-radius:50%;
  background:#bbc8bc;
  transition:.2s;
}

.hero-carousel-nav button:hover{
  color:#315443;
}

.hero-carousel-nav button.active{
  background:#123c2f;
  color:#fff;
}

.hero-carousel-nav button.active i{
  background:#c4f47d;
  box-shadow:0 0 0 3px #c4f47d22;
}

/* Base dos dois novos modos */
.mode-bg{
  position:absolute;
  inset:18px 8px 25px;
  border-radius:50%;
  filter:blur(1px);
  opacity:.75;
  z-index:-1;
}

.mode-badge{
  position:absolute;
  top:28px;
  right:24px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:8px 12px;
  border:1px solid #ffffff90;
  border-radius:999px;
  background:#ffffffdd;
  box-shadow:0 8px 22px #17382c17;
  backdrop-filter:blur(8px);
  font-size:8px;
  letter-spacing:.1em;
  font-weight:850;
  z-index:5;
}

.mode-badge i{
  width:6px;
  height:6px;
  border-radius:50%;
}

.mode-app{
  position:absolute;
  left:2%;
  top:76px;
  width:96%;
  overflow:hidden;
  border-radius:16px;
  background:#fff;
  border:1px solid #dfe7de;
  box-shadow:0 25px 60px #284e2525;
}

.mode-window-top{
  height:39px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 16px;
  border-bottom:1px solid #e7ece5;
  background:#f5f7f3;
  color:#8b978b;
  font-size:7px;
}

.mode-window-top b{
  font-weight:650;
  color:#6b786e;
}

.mode-app-body{
  min-height:300px;
  display:flex;
}

.mode-sidebar{
  width:43px;
  flex:0 0 43px;
  padding:16px 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:21px;
  color:#fff;
  font-size:12px;
}

.mode-sidebar strong{
  font-size:8px;
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  border:1px solid #ffffff45;
  border-radius:8px;
}

.mode-content{
  flex:1;
  min-width:0;
  padding:17px;
}

.mode-heading{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
}

.mode-heading small{
  display:block;
  font-size:6px;
  letter-spacing:.14em;
  font-weight:800;
}

.mode-heading h3{
  margin:4px 0 13px;
  font-size:13px;
  line-height:1.25;
}

.mode-heading>span{
  flex:0 0 auto;
  padding:5px 8px;
  border-radius:999px;
  font-size:7px;
}

.mode-metrics{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}

.mode-metrics>div{
  padding:10px;
  border-radius:9px;
  border:1px solid #ebefea;
}

.mode-metrics small{
  display:block;
  font-size:7px;
  color:#78867c;
}

.mode-metrics strong{
  display:block;
  margin-top:3px;
  font-size:22px;
  letter-spacing:-.05em;
}

.mode-caption{
  position:absolute;
  right:14px;
  bottom:17px;
  color:#909b91;
  font-size:8px;
}

/* =========================================================
   MODO PEDIDOS
   ========================================================= */

.slide-pedidos{
  background:
    radial-gradient(circle at 80% 18%,#ffd49f55,transparent 31%),
    radial-gradient(circle at 18% 75%,#ffb86638,transparent 30%);
}

.order-bg{
  background:radial-gradient(ellipse,#ffe2ba 0%,#fff3df 46%,transparent 73%);
}

.order-badge{
  color:#9b4d13;
  border-color:#f2c28d;
}

.order-badge i{
  background:#f59a42;
  box-shadow:0 0 0 4px #f59a4220;
}

.order-app{
  width:88%;
  left:4%;
  top:69px;
  border-color:#f0d7bd;
  box-shadow:0 28px 65px #8a4a191c;
}

.order-sidebar{
  background:linear-gradient(180deg,#8b451f,#ba662a);
}

.order-live{
  color:#9b4d13;
  background:#fff1df;
  border:1px solid #f5d1a8;
}

.slide-pedidos .mode-heading small{
  color:#b36b31;
}

.slide-pedidos .mode-heading h3{
  color:#512c17;
}

.slide-pedidos .mode-metrics>div{
  background:#fffaf4;
  border-color:#f3dfca;
}

.slide-pedidos .mode-metrics strong{
  color:#8c4b1f;
}

/* Quadro da produção */
.production-board{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:13px;
}

.production-column{
  min-width:0;
  padding:11px;
  border:1px solid #f1dfcd;
  border-radius:10px;
  background:#fffbf7;
}

.production-column>b{
  display:block;
  margin-bottom:7px;
  color:#76401d;
  font-size:8px;
}

.production-column article{
  display:grid;
  grid-template-columns:29px 1fr auto;
  gap:7px;
  align-items:center;
  padding:8px 0;
  border-top:1px solid #f3e6da;
}

.production-column article:first-of-type{
  border-top:0;
}

.production-column article>strong{
  display:grid;
  place-items:center;
  width:29px;
  height:29px;
  border-radius:8px;
  background:#fff0dd;
  color:#a4561f;
  font-size:10px;
}

.production-column article div{
  min-width:0;
}

.production-column article div span{
  display:block;
  overflow:hidden;
  color:#58331d;
  font-size:8px;
  font-weight:750;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.production-column article div small{
  display:block;
  margin-top:2px;
  overflow:hidden;
  color:#9a7b65;
  font-size:6px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.production-column article em{
  padding:4px 5px;
  border-radius:999px;
  background:#fff0d9;
  color:#a65d20;
  font-size:5px;
  font-style:normal;
  font-weight:850;
}

.production-column.ready{
  background:#f6fbef;
  border-color:#dae8ca;
}

.production-column.ready>b{
  color:#4e712f;
}

.production-column.ready article>strong{
  background:#e9f5d9;
  color:#4f7731;
}

.production-column.ready article em{
  background:#dff0cb;
  color:#486b2d;
}

/* Comanda / Nota não fiscal */
.order-receipt{
  position:absolute;
  left:3px;
  bottom:3px;
  width:174px;
  padding:14px 15px 12px;
  border:1px solid #e4ded4;
  border-radius:4px;
  background:#fffefa;
  box-shadow:0 18px 42px #6137162b;
  color:#352a22;
  transform:rotate(-6deg);
  z-index:7;
}

.receipt-brand{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:7px;
}

.receipt-brand b{
  font-size:10px;
}

.receipt-brand small{
  font-size:5px;
  letter-spacing:.08em;
}

.receipt-meta{
  display:flex;
  justify-content:space-between;
  margin-top:9px;
  font-size:6px;
  font-weight:700;
}

.receipt-line{
  margin:9px 0;
  border-top:1px dashed #bfb7ad;
}

.receipt-items{
  display:grid;
  gap:5px;
}

.receipt-items p{
  display:flex;
  justify-content:space-between;
  gap:6px;
  margin:0;
  font-size:6px;
  line-height:1.3;
}

.receipt-items p span{
  min-width:0;
}

.receipt-items p b{
  white-space:nowrap;
}

.receipt-total{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:7px;
}

.receipt-total strong{
  font-size:11px;
}

.receipt-ticket{
  margin-top:10px;
  padding:8px 5px;
  border-radius:5px;
  background:#fff1df;
  text-align:center;
}

.receipt-ticket small,
.receipt-ticket span{
  display:block;
  font-size:5px;
  letter-spacing:.05em;
}

.receipt-ticket strong{
  display:block;
  margin:1px 0;
  color:#9b4d13;
  font-size:29px;
  line-height:1;
}

/* Chamada de pedido pronto */
.order-call{
  position:absolute;
  right:0;
  bottom:39px;
  min-width:145px;
  padding:13px 15px;
  border:1px solid #d9863c;
  border-radius:13px;
  background:linear-gradient(135deg,#8b451f,#bb672a);
  box-shadow:0 18px 38px #69381730;
  color:#fff;
  transform:rotate(3deg);
  z-index:8;
}

.order-call small{
  display:block;
  color:#ffd6aa;
  font-size:6px;
  letter-spacing:.13em;
  font-weight:800;
}

.order-call strong{
  display:inline-block;
  margin-top:3px;
  color:#ffe4b9;
  font-size:29px;
}

.order-call span{
  margin-left:8px;
  font-size:8px;
}

/* =========================================================
   MODO RETIRADAS
   ========================================================= */

.slide-retiradas{
  background:
    radial-gradient(circle at 82% 18%,#b9dcff66,transparent 31%),
    radial-gradient(circle at 17% 76%,#9bc9ff38,transparent 30%);
}

.pickup-bg{
  background:radial-gradient(ellipse,#d7ebff 0%,#edf7ff 48%,transparent 74%);
}

.pickup-badge{
  color:#235f91;
  border-color:#bad8ee;
}

.pickup-badge i{
  background:#4a98d2;
  box-shadow:0 0 0 4px #4a98d220;
}

.pickup-app{
  width:88%;
  left:4%;
  top:69px;
  border-color:#cee1ef;
  box-shadow:0 28px 65px #245a7e1c;
}

.pickup-sidebar{
  background:linear-gradient(180deg,#184e75,#287cac);
}

.pickup-live{
  color:#28678f;
  background:#eaf6ff;
  border:1px solid #c9e2f3;
}

.slide-retiradas .mode-heading small{
  color:#477fa5;
}

.slide-retiradas .mode-heading h3{
  color:#183f59;
}

.slide-retiradas .mode-metrics>div{
  background:#f7fbfe;
  border-color:#dcebf5;
}

.slide-retiradas .mode-metrics strong{
  color:#245f87;
}

/* Lista de retiradas */
.pickup-list{
  display:grid;
  gap:7px;
  margin-top:13px;
}

.pickup-list article{
  display:grid;
  grid-template-columns:38px 1fr auto;
  align-items:center;
  gap:9px;
  padding:9px 11px;
  border:1px solid #dceaf3;
  border-radius:10px;
  background:#fbfdff;
}

.pickup-list article>strong{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:9px;
  background:#e8f4fc;
  color:#25658e;
  font-size:13px;
}

.pickup-list article div{
  min-width:0;
}

.pickup-list article div b{
  display:block;
  color:#294c63;
  font-size:8px;
}

.pickup-list article div small{
  display:block;
  margin-top:2px;
  color:#7892a2;
  font-size:6px;
}

.pickup-list article>span{
  padding:5px 7px;
  border-radius:999px;
  background:#edf3f7;
  color:#657f90;
  font-size:5px;
  font-weight:850;
}

.pickup-list article.pickup-ready{
  border-color:#a9d0eb;
  background:#edf8ff;
}

.pickup-list article.pickup-ready>strong{
  background:#cdeaff;
  color:#155f8d;
}

.pickup-list article.pickup-ready>span{
  background:#cceaff;
  color:#155e8a;
}

/* Comprovante de retirada */
.pickup-receipt{
  position:absolute;
  left:4px;
  bottom:4px;
  width:177px;
  padding:14px 15px 12px;
  border:1px solid #d9e2e8;
  border-radius:5px;
  background:#ffffff;
  box-shadow:0 18px 42px #24587328;
  color:#283944;
  transform:rotate(-5deg);
  z-index:7;
}

.pickup-customer{
  margin-top:11px;
  padding:9px;
  border-radius:7px;
  background:#eff8fe;
  text-align:center;
}

.pickup-customer small{
  display:block;
  color:#6388a0;
  font-size:5px;
  letter-spacing:.08em;
}

.pickup-customer strong{
  display:block;
  margin:2px 0;
  color:#205e86;
  font-size:17px;
}

.pickup-customer span{
  display:block;
  color:#405b6b;
  font-size:7px;
}

.pickup-number{
  background:#eaf6ff;
}

.pickup-number strong{
  color:#236a98;
}

/* Chamada da retirada */
.pickup-call{
  position:absolute;
  right:0;
  bottom:39px;
  min-width:150px;
  padding:13px 15px;
  border:1px solid #4a91be;
  border-radius:13px;
  background:linear-gradient(135deg,#174e74,#277cab);
  box-shadow:0 18px 38px #174d7030;
  color:#fff;
  transform:rotate(3deg);
  z-index:8;
}

.pickup-call small{
  display:block;
  color:#bfe3f7;
  font-size:6px;
  letter-spacing:.13em;
  font-weight:800;
}

.pickup-call strong{
  display:inline-block;
  margin-top:3px;
  color:#d7efff;
  font-size:29px;
}

.pickup-call span{
  margin-left:8px;
  font-size:8px;
}

/* =========================================================
   AJUSTE FINAL DO TRACK + RESPONSIVIDADE
   ========================================================= */

/* O track tem a largura do viewport.
   Cada slide ocupa 100%, e os três ficam lado a lado pelo flex. */
.hero-carousel-track{
  width:100%;
}

.hero-carousel-slide{
  flex:0 0 100%;
  width:100%;
}

/* Desktop intermediário */
@media(max-width:1050px){
  .hero-carousel-v2{
    height:540px;
  }

  .order-app,
  .pickup-app{
    width:94%;
    left:3%;
  }

  .order-receipt,
  .pickup-receipt{
    transform:scale(.92) rotate(-5deg);
    transform-origin:left bottom;
  }

  .order-call,
  .pickup-call{
    transform:scale(.92) rotate(3deg);
    transform-origin:right bottom;
  }
}

/* Mobile */
@media(max-width:780px){
  .hero-carousel-v2{
    width:min(550px,95%);
    height:520px;
    margin:0 auto 25px;
  }

  .hero-carousel-viewport{
    inset:0 0 48px;
    border-radius:18px;
  }

  .hero-carousel-nav{
    bottom:0;
    gap:2px;
    padding:3px;
  }

  .hero-carousel-nav button{
    padding:6px 8px;
    font-size:8px;
  }

  .mode-badge{
    top:18px;
    right:13px;
    padding:6px 9px;
    font-size:6px;
  }

  .order-app,
  .pickup-app{
    top:57px;
    left:2%;
    width:96%;
  }

  .mode-window-top{
    height:34px;
    padding:0 11px;
  }

  .mode-app-body{
    min-height:285px;
  }

  .mode-sidebar{
    width:34px;
    flex-basis:34px;
    gap:18px;
  }

  .mode-content{
    padding:12px;
  }

  .mode-heading h3{
    max-width:220px;
    font-size:11px;
  }

  .mode-metrics>div{
    padding:8px;
  }

  .mode-metrics strong{
    font-size:18px;
  }

  .production-board{
    gap:6px;
  }

  .production-column{
    padding:8px;
  }

  .production-column article{
    grid-template-columns:25px 1fr;
    gap:5px;
  }

  .production-column article>strong{
    width:25px;
    height:25px;
  }

  .production-column article em{
    display:none;
  }

  .pickup-list article{
    grid-template-columns:32px 1fr auto;
    padding:7px 8px;
  }

  .pickup-list article>strong{
    width:32px;
    height:32px;
  }

  .order-receipt,
  .pickup-receipt{
    left:1px;
    bottom:4px;
    width:154px;
    transform:scale(.88) rotate(-5deg);
    transform-origin:left bottom;
  }

  .order-call,
  .pickup-call{
    right:0;
    bottom:32px;
    min-width:125px;
    transform:scale(.88) rotate(3deg);
    transform-origin:right bottom;
  }

  .mode-caption{
    display:none;
  }
}

@media(prefers-reduced-motion:reduce){
  .hero-carousel-track{
    transition:none!important;
  }
}

/* =========================================================
   ANIMAÇÕES CONTÍNUAS DOS MODOS PEDIDOS / RETIRADAS
   ========================================================= */

/* leve respiração do mockup inteiro */
.order-app,
.pickup-app{
  animation:heroMockupBreath 6s ease-in-out infinite;
  transform-origin:center center;
}

/* badge do modo com micro flutuação */
.order-badge,
.pickup-badge{
  animation:heroBadgeFloat 4.2s ease-in-out infinite;
}

/* nota/comprovante: sobe e desce como no atendimento */
.order-receipt,
.pickup-receipt{
  animation:heroReceiptFloat 4.8s ease-in-out infinite;
  transform-origin:left bottom;
}

/* card de chamada: flutuação + destaque */
.order-call,
.pickup-call{
  animation:heroCallFloat 3.8s ease-in-out infinite;
  transform-origin:right center;
}

/* cards internos respirando levemente */
.slide-pedidos .mode-metrics > div,
.slide-retiradas .mode-metrics > div{
  animation:heroMetricPulse 5.5s ease-in-out infinite;
}

.slide-pedidos .mode-metrics > div:nth-child(2),
.slide-retiradas .mode-metrics > div:nth-child(2){
  animation-delay:.35s;
}

.slide-pedidos .mode-metrics > div:nth-child(3),
.slide-retiradas .mode-metrics > div:nth-child(3){
  animation-delay:.7s;
}

/* linhas com micro movimento alternado */
.production-column article,
.pickup-list article{
  animation:heroRowIdle 4.6s ease-in-out infinite;
}

.production-column article:nth-child(2),
.pickup-list article:nth-child(2){
  animation-delay:.2s;
}

.production-column article:nth-child(3),
.pickup-list article:nth-child(3){
  animation-delay:.45s;
}

.production-column article:nth-child(4),
.pickup-list article:nth-child(4){
  animation-delay:.7s;
}

@keyframes heroMockupBreath{
  0%   { transform:translateY(0) scale(1); }
  50%  { transform:translateY(-4px) scale(1.004); }
  100% { transform:translateY(0) scale(1); }
}

@keyframes heroBadgeFloat{
  0%   { transform:translateY(0); }
  50%  { transform:translateY(-5px); }
  100% { transform:translateY(0); }
}

@keyframes heroReceiptFloat{
  0%   { transform:translateY(0) rotate(-6deg); }
  50%  { transform:translateY(-10px) rotate(-5deg); }
  100% { transform:translateY(0) rotate(-6deg); }
}

@keyframes heroCallFloat{
  0%   { transform:translateY(0) rotate(3deg) scale(1); box-shadow:0 18px 38px rgba(0,0,0,.16); }
  50%  { transform:translateY(-8px) rotate(2deg) scale(1.018); box-shadow:0 24px 46px rgba(0,0,0,.22); }
  100% { transform:translateY(0) rotate(3deg) scale(1); box-shadow:0 18px 38px rgba(0,0,0,.16); }
}

@keyframes heroMetricPulse{
  0%   { transform:translateY(0); }
  50%  { transform:translateY(-3px); }
  100% { transform:translateY(0); }
}

@keyframes heroRowIdle{
  0%   { transform:translateX(0); }
  50%  { transform:translateX(2px); }
  100% { transform:translateX(0); }
}

/* respeita acessibilidade */
@media(prefers-reduced-motion:reduce){
  .order-app,
  .pickup-app,
  .order-badge,
  .pickup-badge,
  .order-receipt,
  .pickup-receipt,
  .order-call,
  .pickup-call,
  .slide-pedidos .mode-metrics > div,
  .slide-retiradas .mode-metrics > div,
  .production-column article,
  .pickup-list article{
    animation:none !important;
  }
}

/* =========================================================
   POLIMENTO V3
   - atendimento continua animando
   - remove jitter/blur dos textos
   - suaviza borda do mockup
   ========================================================= */

/* ----------- melhora renderização / nitidez ----------- */
.hero-carousel-v2 *,
.hero-carousel-v2 *::before,
.hero-carousel-v2 *::after{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  backface-visibility:hidden;
}

.slide-atendimento .floating-ticket,
.slide-atendimento .floating-call,
.slide-atendimento .mini-dashboard,
.order-app,
.pickup-app,
.order-receipt,
.pickup-receipt,
.order-call,
.pickup-call{
  transform:translateZ(0);
  will-change:transform;
  backface-visibility:hidden;
}

/* ----------- suaviza a moldura / borda do mockup ----------- */
.slide-atendimento .mini-dashboard,
.order-app,
.pickup-app{
  border:1px solid rgba(16,52,42,.08)!important;
  box-shadow:
    0 20px 55px rgba(12,42,34,.10),
    0 4px 12px rgba(12,42,34,.04)!important;
  overflow:hidden;
}

.hero-carousel-v2::after{
  content:'';
  position:absolute;
  inset:18px 8px 58px 8px;
  border-radius:30px;
  pointer-events:none;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.55),
    inset 0 -35px 60px rgba(255,255,255,.05);
  z-index:1;
}

/* ----------- animações contínuas do ATENDIMENTO ----------- */
.slide-atendimento .mini-dashboard{
  animation:ztPanelFloat 6.5s ease-in-out infinite !important;
}

.slide-atendimento .floating-ticket{
  animation:ztTicketFloat 4.9s ease-in-out infinite !important;
  transform-origin:left bottom;
}

.slide-atendimento .floating-call{
  animation:ztCallFloat 3.9s ease-in-out infinite !important;
  transform-origin:right center;
}

/* ----------- animações contínuas dos outros modos ----------- */
.order-app,
.pickup-app{
  animation:ztPanelFloat 6.5s ease-in-out infinite !important;
}

.order-receipt{
  animation:ztReceiptOrderFloat 5s ease-in-out infinite !important;
  transform-origin:left bottom;
}

.pickup-receipt{
  animation:ztReceiptPickupFloat 5s ease-in-out infinite !important;
  transform-origin:left bottom;
}

.order-call,
.pickup-call{
  animation:ztCallFloatAlt 3.9s ease-in-out infinite !important;
  transform-origin:right center;
}

/* cards internos respirando leve */
.slide-pedidos .mode-metrics > div,
.slide-retiradas .mode-metrics > div{
  animation:ztMetricLift 5.2s ease-in-out infinite;
}

.slide-pedidos .mode-metrics > div:nth-child(2),
.slide-retiradas .mode-metrics > div:nth-child(2){
  animation-delay:.18s;
}

.slide-pedidos .mode-metrics > div:nth-child(3),
.slide-retiradas .mode-metrics > div:nth-child(3){
  animation-delay:.36s;
}

/* linhas de pedido / retirada com micro vida */
.production-column article,
.pickup-list article{
  animation:ztRowDrift 4.8s ease-in-out infinite;
}

.production-column article:nth-of-type(2),
.pickup-list article:nth-of-type(2){
  animation-delay:.2s;
}

.production-column article:nth-of-type(3),
.pickup-list article:nth-of-type(3){
  animation-delay:.42s;
}

.production-column article:nth-of-type(4),
.pickup-list article:nth-of-type(4){
  animation-delay:.6s;
}

/* ----------- keyframes premium e sem blur ----------- */

/* mockup inteiro: só translateY, sem scale */
@keyframes ztPanelFloat{
  0%   { transform:translate3d(0,0,0); }
  50%  { transform:translate3d(0,-5px,0); }
  100% { transform:translate3d(0,0,0); }
}

/* atendimento - senha */
@keyframes ztTicketFloat{
  0%{
    transform:translate3d(0,0,0) rotate(-8deg);
    box-shadow:0 18px 40px rgba(20,48,34,.12);
  }
  50%{
    transform:translate3d(0,-10px,0) rotate(-7deg);
    box-shadow:0 26px 52px rgba(20,48,34,.18);
  }
  100%{
    transform:translate3d(0,0,0) rotate(-8deg);
    box-shadow:0 18px 40px rgba(20,48,34,.12);
  }
}

/* call atendimento */
@keyframes ztCallFloat{
  0%{
    transform:translate3d(0,0,0) rotate(3deg);
    box-shadow:0 18px 36px rgba(7,56,46,.18);
  }
  50%{
    transform:translate3d(0,-8px,0) rotate(3deg);
    box-shadow:0 26px 48px rgba(7,56,46,.24);
  }
  100%{
    transform:translate3d(0,0,0) rotate(3deg);
    box-shadow:0 18px 36px rgba(7,56,46,.18);
  }
}

/* pedidos - nota */
@keyframes ztReceiptOrderFloat{
  0%{
    transform:translate3d(0,0,0) rotate(-6deg);
    box-shadow:0 18px 42px rgba(97,55,22,.18);
  }
  50%{
    transform:translate3d(0,-10px,0) rotate(-5deg);
    box-shadow:0 28px 56px rgba(97,55,22,.24);
  }
  100%{
    transform:translate3d(0,0,0) rotate(-6deg);
    box-shadow:0 18px 42px rgba(97,55,22,.18);
  }
}

/* retiradas - comprovante */
@keyframes ztReceiptPickupFloat{
  0%{
    transform:translate3d(0,0,0) rotate(-5deg);
    box-shadow:0 18px 42px rgba(36,88,115,.16);
  }
  50%{
    transform:translate3d(0,-10px,0) rotate(-4deg);
    box-shadow:0 28px 56px rgba(36,88,115,.22);
  }
  100%{
    transform:translate3d(0,0,0) rotate(-5deg);
    box-shadow:0 18px 42px rgba(36,88,115,.16);
  }
}

/* cards de chamada pedidos/retiradas */
@keyframes ztCallFloatAlt{
  0%{
    transform:translate3d(0,0,0) rotate(3deg);
  }
  50%{
    transform:translate3d(0,-8px,0) rotate(3deg);
  }
  100%{
    transform:translate3d(0,0,0) rotate(3deg);
  }
}

@keyframes ztMetricLift{
  0%   { transform:translate3d(0,0,0); }
  50%  { transform:translate3d(0,-3px,0); }
  100% { transform:translate3d(0,0,0); }
}

@keyframes ztRowDrift{
  0%   { transform:translate3d(0,0,0); }
  50%  { transform:translate3d(2px,0,0); }
  100% { transform:translate3d(0,0,0); }
}

/* ----------- acessibilidade ----------- */
@media(prefers-reduced-motion:reduce){
  .slide-atendimento .mini-dashboard,
  .slide-atendimento .floating-ticket,
  .slide-atendimento .floating-call,
  .order-app,
  .pickup-app,
  .order-receipt,
  .pickup-receipt,
  .order-call,
  .pickup-call,
  .slide-pedidos .mode-metrics > div,
  .slide-retiradas .mode-metrics > div,
  .production-column article,
  .pickup-list article{
    animation:none !important;
  }
}

/* =========================================================
   HOTFIX V4
   - remove o risco das bordas
   - devolve a inclinação "deitada"
   - replica a mesma postura nos 3 mockups
   ========================================================= */

/* tira a película/borda que criou o risco visual */
.hero-carousel-v2::after{
  display:none !important;
}

/* suaviza a borda real dos painéis */
.slide-atendimento .mini-dashboard,
.order-app,
.pickup-app{
  border:1px solid rgba(16,52,42,.05) !important;
  box-shadow:
    0 22px 58px rgba(10,35,29,.10),
    0 5px 16px rgba(10,35,29,.04) !important;
  transform-origin:center center;
  backface-visibility:hidden;
  will-change:transform;
}

/* devolve o mockup "deitado" */
.slide-atendimento .mini-dashboard{
  animation:ztPanelTiltFloatGreen 6.6s ease-in-out infinite !important;
}

.order-app{
  animation:ztPanelTiltFloatOrange 6.6s ease-in-out infinite !important;
}

.pickup-app{
  animation:ztPanelTiltFloatBlue 6.6s ease-in-out infinite !important;
}

/* atendimento */
@keyframes ztPanelTiltFloatGreen{
  0%{
    transform:translate3d(0,0,0) rotate(-2.4deg);
  }
  50%{
    transform:translate3d(0,-5px,0) rotate(-2.4deg);
  }
  100%{
    transform:translate3d(0,0,0) rotate(-2.4deg);
  }
}

/* pedidos */
@keyframes ztPanelTiltFloatOrange{
  0%{
    transform:translate3d(0,0,0) rotate(-2.4deg);
  }
  50%{
    transform:translate3d(0,-5px,0) rotate(-2.4deg);
  }
  100%{
    transform:translate3d(0,0,0) rotate(-2.4deg);
  }
}

/* retiradas */
@keyframes ztPanelTiltFloatBlue{
  0%{
    transform:translate3d(0,0,0) rotate(-2.4deg);
  }
  50%{
    transform:translate3d(0,-5px,0) rotate(-2.4deg);
  }
  100%{
    transform:translate3d(0,0,0) rotate(-2.4deg);
  }
}

/* mantém os cartões acompanhando o visual inclinado */
.slide-atendimento .floating-ticket{
  transform-origin:left bottom;
}

.slide-atendimento .floating-call{
  transform-origin:right center;
}

.order-receipt{
  transform-origin:left bottom;
}

.order-call{
  transform-origin:right center;
}

.pickup-receipt{
  transform-origin:left bottom;
}

.pickup-call{
  transform-origin:right center;
}

/* reduz um pouco a sensação de moldura dura nas laterais */
.hero-carousel-viewport{
  overflow:hidden;
  border-radius:24px;
}

/* acessibilidade */
@media(prefers-reduced-motion:reduce){
  .slide-atendimento .mini-dashboard,
  .order-app,
  .pickup-app{
    animation:none !important;
    transform:rotate(-2.4deg) !important;
  }
}

/* =========================================================
   V5 — ÍCONES LATERAIS PREMIUM
   ========================================================= */

.mode-sidebar{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  padding:18px 0;
}

.mode-sidebar .side-glyph{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:11px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  color:#fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 8px 18px rgba(0,0,0,.10);
  opacity:.94;
  pointer-events:none;
  backface-visibility:hidden;
}

.mode-sidebar .side-glyph svg{
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.mode-sidebar .side-glyph.active{
  transform:translateY(-1px);
  opacity:1;
}

/* Pedidos */
.order-sidebar .side-glyph.active{
  background:#fff7ef;
  color:#a85b24;
  border-color:#f3c79f;
  box-shadow:
    0 9px 20px rgba(168,91,36,.18),
    inset 0 1px 0 rgba(255,255,255,.8);
}

/* Retiradas */
.pickup-sidebar .side-glyph.active{
  background:#eef8ff;
  color:#286c97;
  border-color:#bfdbee;
  box-shadow:
    0 9px 20px rgba(40,108,151,.17),
    inset 0 1px 0 rgba(255,255,255,.8);
}

/* leve movimento individual dos ícones */
.mode-sidebar .side-glyph:nth-child(2){
  animation:ztSideIconFloat 4.8s ease-in-out infinite;
}

.mode-sidebar .side-glyph:nth-child(3){
  animation:ztSideIconFloat 4.8s ease-in-out infinite .55s;
}

.mode-sidebar .side-glyph:nth-child(4){
  animation:ztSideIconFloat 4.8s ease-in-out infinite 1.1s;
}

@keyframes ztSideIconFloat{
  0%,100%{
    transform:translateY(0);
  }
  50%{
    transform:translateY(-2px);
  }
}

@media(max-width:780px){
  .mode-sidebar .side-glyph{
    width:30px;
    height:30px;
    border-radius:9px;
  }

  .mode-sidebar .side-glyph svg{
    width:14px;
    height:14px;
  }
}

/* =========================================================
   V5 — MOVIMENTO PREMIUM DOS 3 MOCKUPS
   Inclinação fixa + movimento separado para preservar nitidez
   ========================================================= */

/* ---------- MESMA PERSPECTIVA NOS 3 SISTEMAS ---------- */

.slide-atendimento .mini-dashboard,
.order-app,
.pickup-app{
  transform:
    perspective(1400px)
    rotateY(-10deg)
    rotateX(4deg)
    rotateZ(-1.8deg) !important;

  transform-origin:center center;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  will-change:translate;
  outline:0 !important;

  border:1px solid rgba(20,55,45,.045) !important;

  box-shadow:
    0 28px 65px rgba(29,66,49,.10),
    0 8px 24px rgba(29,66,49,.045) !important;
}

/* remove qualquer película/borda artificial antiga */
.hero-carousel-v2::after{
  content:none !important;
  display:none !important;
}

/* viewport limpo */
.hero-carousel-viewport{
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}

/* ---------- PAINEL PRINCIPAL ---------- */

.slide-atendimento .mini-dashboard,
.order-app,
.pickup-app{
  animation:ztV5PanelFloat 6.4s ease-in-out infinite !important;
}

@keyframes ztV5PanelFloat{
  0%,100%{
    translate:0 0;
  }
  50%{
    translate:0 -5px;
  }
}

/* ---------- SENHA / COMANDA / COMPROVANTE ---------- */

/* rotação fica fixa */
.slide-atendimento .floating-ticket{
  transform:rotate(-8deg) !important;
}

.order-receipt{
  transform:rotate(-6deg) !important;
}

.pickup-receipt{
  transform:rotate(-5deg) !important;
}

/* movimento fica separado */
.slide-atendimento .floating-ticket,
.order-receipt,
.pickup-receipt{
  animation:ztV5ReceiptFloat 4.8s ease-in-out infinite !important;
  will-change:translate;
  backface-visibility:hidden;
}

@keyframes ztV5ReceiptFloat{
  0%,100%{
    translate:0 0;
  }
  50%{
    translate:0 -9px;
  }
}

/* ---------- PRÓXIMA CHAMADA / PEDIDO PRONTO / RETIRADA ---------- */

/* nada de scale: evita fonte borrada */
.slide-atendimento .floating-call,
.order-call,
.pickup-call{
  transform:rotate(3deg) !important;
  animation:ztV5CallFloat 4.8s ease-in-out infinite .55s !important;
  will-change:translate;
  backface-visibility:hidden;
}

@keyframes ztV5CallFloat{
  0%,100%{
    translate:0 0;
  }
  50%{
    translate:0 7px;
  }
}

/* ---------- MICROINTERAÇÃO DOS DADOS ---------- */

.slide-pedidos .mode-metrics>div,
.slide-retiradas .mode-metrics>div{
  animation:ztV5Metric 5.4s ease-in-out infinite !important;
  will-change:translate;
}

.slide-pedidos .mode-metrics>div:nth-child(2),
.slide-retiradas .mode-metrics>div:nth-child(2){
  animation-delay:.3s !important;
}

.slide-pedidos .mode-metrics>div:nth-child(3),
.slide-retiradas .mode-metrics>div:nth-child(3){
  animation-delay:.6s !important;
}

@keyframes ztV5Metric{
  0%,100%{
    translate:0 0;
  }
  50%{
    translate:0 -2px;
  }
}

/* pedidos e retiradas também têm vida interna */
.production-column article,
.pickup-list article{
  animation:ztV5Row 5s ease-in-out infinite !important;
  will-change:translate;
}

.production-column article:nth-of-type(2),
.pickup-list article:nth-of-type(2){
  animation-delay:.35s !important;
}

.production-column article:nth-of-type(3),
.pickup-list article:nth-of-type(3){
  animation-delay:.7s !important;
}

@keyframes ztV5Row{
  0%,100%{
    translate:0 0;
  }
  50%{
    translate:2px 0;
  }
}

/* ---------- NITIDEZ ---------- */

.hero-carousel-v2{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:geometricPrecision;
}

.floating-call,
.order-call,
.pickup-call,
.floating-ticket,
.order-receipt,
.pickup-receipt{
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}

/* ---------- MOBILE ---------- */

@media(max-width:780px){

  .slide-atendimento .mini-dashboard,
  .order-app,
  .pickup-app{
    transform:
      perspective(1200px)
      rotateY(-6deg)
      rotateX(2deg)
      rotateZ(-1deg) !important;
  }

  .slide-atendimento .floating-ticket,
  .order-receipt,
  .pickup-receipt{
    animation-duration:5.3s !important;
  }

  .slide-atendimento .floating-call,
  .order-call,
  .pickup-call{
    animation-duration:5.3s !important;
  }
}

/* ---------- REDUCED MOTION ---------- */

@media(prefers-reduced-motion:reduce){

  .slide-atendimento .mini-dashboard,
  .order-app,
  .pickup-app,
  .slide-atendimento .floating-ticket,
  .order-receipt,
  .pickup-receipt,
  .slide-atendimento .floating-call,
  .order-call,
  .pickup-call,
  .slide-pedidos .mode-metrics>div,
  .slide-retiradas .mode-metrics>div,
  .production-column article,
  .pickup-list article{
    animation:none !important;
    translate:0 0 !important;
  }
}

/* =========================================================
   V6 — PADRONIZAÇÃO DOS BOTÕES LATERAIS
   Mesmo estilo visual do bloco Atendimento
   ========================================================= */

.mode-sidebar{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:13px;
  padding:18px 0;
}

/* base padronizada */
.mode-sidebar .side-glyph{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.88);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 4px 12px rgba(0,0,0,.08);
  opacity:.92;
  transition:
    transform .22s ease,
    opacity .22s ease,
    background .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    color .22s ease;
  pointer-events:none;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

.mode-sidebar .side-glyph svg{
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* estado ativo — mais refinado, no estilo do atendimento */
.mode-sidebar .side-glyph.active{
  transform:translateY(-1px);
  opacity:1;
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 8px 18px rgba(0,0,0,.14);
}

/* cor temática de cada operação sem destruir o padrão */
.order-sidebar .side-glyph.active{
  color:#fff6ee;
  background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.24);
}

.pickup-sidebar .side-glyph.active{
  color:#eef8ff;
  background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.24);
}

/* ícones não ativos mais discretos */
.order-sidebar .side-glyph:not(.active),
.pickup-sidebar .side-glyph:not(.active){
  color:rgba(255,255,255,.82);
}

/* leve flutuação premium */
.mode-sidebar .side-glyph:nth-child(2){
  animation:ztSideIconFloat 4.8s ease-in-out infinite;
}

.mode-sidebar .side-glyph:nth-child(3){
  animation:ztSideIconFloat 4.8s ease-in-out infinite .55s;
}

.mode-sidebar .side-glyph:nth-child(4){
  animation:ztSideIconFloat 4.8s ease-in-out infinite 1.1s;
}

@keyframes ztSideIconFloat{
  0%,100%{
    transform:translateY(0);
  }
  50%{
    transform:translateY(-2px);
  }
}

/* mobile */
@media(max-width:780px){
  .mode-sidebar{
    gap:11px;
    padding:14px 0;
  }

  .mode-sidebar .side-glyph{
    width:30px;
    height:30px;
    border-radius:9px;
  }

  .mode-sidebar .side-glyph svg{
    width:14px;
    height:14px;
  }
}

/* reduced motion */
@media(prefers-reduced-motion:reduce){
  .mode-sidebar .side-glyph{
    animation:none !important;
    transform:none !important;
  }
}

/* =========================================================
   V8 — SIDEBAR DE PEDIDOS/RETIRADAS NO MESMO PADRÃO DO VERDE
   remove o visual de botão e replica a linguagem do Atendimento
   ========================================================= */

/* mesma largura/estrutura da sidebar do atendimento */
.order-sidebar,
.pickup-sidebar{
  width:54px !important;
  flex:0 0 54px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:22px !important;
  padding:18px 0 !important;
}

/* remove totalmente a aparência de botão */
.order-sidebar .side-glyph,
.pickup-sidebar .side-glyph{
  width:auto !important;
  height:auto !important;
  display:grid !important;
  place-items:center !important;
  padding:0 !important;
  margin:0 !important;
  border:none !important;
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
  transform:none !important;
  opacity:.95 !important;
}

/* estado ativo continua sem caixa */
.order-sidebar .side-glyph.active,
.pickup-sidebar .side-glyph.active{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  transform:none !important;
  opacity:1 !important;
}

/* tamanho e desenho dos ícones */
.order-sidebar .side-glyph svg,
.pickup-sidebar .side-glyph svg{
  width:18px !important;
  height:18px !important;
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:1.9 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}

/* cor dos ícones — clara e elegante, sem caixa */
.order-sidebar .side-glyph{
  color:#f6e7d8 !important;
}

.pickup-sidebar .side-glyph{
  color:#dcefff !important;
}

/* leve destaque no primeiro ícone, mas sem parecer botão */
.order-sidebar .side-glyph.active{
  color:#fffaf4 !important;
}

.pickup-sidebar .side-glyph.active{
  color:#f5fbff !important;
}

/* remove a flutuação herdada dos ícones em pedidos/retiradas */
.order-sidebar .side-glyph,
.pickup-sidebar .side-glyph{
  animation:none !important;
}

/* mobile */
@media(max-width:780px){
  .order-sidebar,
  .pickup-sidebar{
    width:46px !important;
    flex-basis:46px !important;
    gap:18px !important;
    padding:14px 0 !important;
  }

  .order-sidebar .side-glyph svg,
  .pickup-sidebar .side-glyph svg{
    width:16px !important;
    height:16px !important;
  }
}