/* ==========================================================================
   Consistem ERP 8.1 — Landing page (layout das seções · protótipo v2 do Figma)
   Depende de ds.css
   ========================================================================== */

.container { max-width: calc(1278px + var(--gutter) * 2); }

/* Seções escuras: recuadas 8px das bordas, cantos de 24px */
.section--dark { background: var(--grafite-800); color: #fff; width: calc(100% - 16px); max-width: 1600px; margin-inline: auto; border-radius: var(--radius-lg); overflow: hidden; }
/* Conteúdo interno das seções grafite: até 1440px (o bloco grafite vai até 1600px) */
.section--dark > .container { max-width: 1440px; }

/* Cabeçalho com eyebrow + título + texto */
.head { display: grid; gap: var(--space-4); justify-items: start; }
.head .t-h2 { max-width: 13em; }
.lead-muted { font-size: var(--fs-lead); line-height: 1.5; color: var(--grafite-300); }
.head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(32px, 8vw, 128px); }
.head-row > p { flex: 1 1 auto; max-width: 56em; }
.head-row > .btn { flex: none; }
@media (max-width: 860px) { .head-row { flex-direction: column; align-items: flex-start; gap: var(--space-6); } }

/* ---------- 01 · HERO ---------- */
.hero { background: #fff; padding-block: 64px; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 484px); align-items: center; gap: var(--space-8); }
.hero__content { display: grid; gap: var(--space-6); justify-items: start; }

/* Submarca: logotipo Consistem + tag ERP alinhada à borda direita do nome */
.submarca { display: inline-grid; justify-items: end; gap: 0; padding-bottom: var(--space-2); color: var(--grafite-800); }
.submarca .logo { width: 220px; height: auto; }
.submarca__tag {
  display: inline-flex; align-items: center; height: 24px; padding: 3px 6px; border-radius: 3px;
  background: var(--grafite-800); color: #fff; font-size: 15.74px; font-weight: 600; line-height: 1; letter-spacing: -0.026em;
}

.hero__title { font-size: clamp(2.5rem, 1.6rem + 3vw, 4rem); line-height: 1.125; letter-spacing: -0.02em; font-weight: 400; max-width: 558px; text-wrap: balance; }
.hero__text { font-size: var(--fs-lead); line-height: 1.5; color: rgba(46,46,48,.92); max-width: 34em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); padding-top: var(--space-2); }
.hero__actions .btn--outline { height: 56px; font-size: 1.0625rem; }
.hero__mark { display: grid; place-items: center; padding: 48px; }
.hero__mark img { width: 100%; max-width: 388px; height: auto; }
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__mark { order: -1; padding: 0 0 8px; justify-items: start; }
  .hero__mark img { max-width: 200px; }
}
@media (max-width: 520px) { .hero__actions .btn { flex: 1 1 100%; } }

/* ---------- 02 · GERAÇÃO 8 ---------- */
.gen8__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: clamp(40px, 7vw, 96px); }
.gen8__head .t-h2 { max-width: 408px; }
.gen8__head > div { display: grid; gap: var(--space-2); }
.gen8__head .t-lead { color: var(--grafite-800); }
.gen8__head .t-body { color: var(--grafite-300); }
/* Grade de recursos em bloco grafite (ajuste pedido na home) */
.gen8 .feature-row { margin-top: 64px; gap: 0; padding: 32px; background-color: var(--grafite-800); border-radius: var(--radius-lg); color: #fff; }
.gen8 .feature { border-left-color: rgba(255,255,255,.12); }
.gen8 .feature:last-child { padding-right: 0; }
@media (max-width: 1024px) and (min-width: 601px) { .gen8 .feature:nth-child(2) { padding-right: 0; } .gen8 .feature-row { row-gap: 40px; } }
.gen8 .feature__icon { background: rgba(255,255,255,.08); color: #fff; }
.gen8 .feature__title { color: #fff; }
.gen8 .feature__text { color: rgba(255,255,255,.72); }
@media (hover: hover) { .gen8 .feature:hover .feature__icon { background: var(--coral-action); } }
.gen8 .feature { padding-block: var(--space-2); }
.gen8 .feature__title { margin-bottom: 0; padding-top: 0; line-height: 1.3; }
.gen8 .feature__icon { margin-bottom: var(--space-6); }
.gen8 .feature__text { padding-top: var(--space-3); max-width: 15.5em; }
@media (max-width: 860px) { .gen8__head { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); } }

/* ---------- 03 · CLARA IA ---------- */
.clara { padding-top: 0; }
.clara__grid { display: grid; grid-template-columns: minmax(0, 622px) minmax(0, 528px); justify-content: space-between; align-items: center; gap: var(--space-10); }
.clara__content { display: grid; gap: var(--space-8); justify-items: start; }
.clara__titles { display: grid; gap: 0; }
.clara__titles .t-lead { font-weight: 500; color: var(--coral-600); }
.clara__body { display: grid; gap: var(--space-6); color: var(--grafite-500); }
.clara__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.clara__chips .chip { height: auto; padding: 6px 12px; font-size: .875rem; line-height: 1.5; }
.clara__visual img { width: 100%; height: auto; }
@media (max-width: 960px) { .clara__grid { grid-template-columns: minmax(0, 1fr); } .clara__visual { max-width: 460px; } }

/* ---------- 04 · INDÚSTRIA 4.0 ---------- */
.i40 { padding-block: 113px; }
.i40__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(48px, 7vw, 120px); }
.i40__media { position: relative; }
.i40__media .media { aspect-ratio: 596 / 477; background: var(--grafite-900); }
.i40__media .speed-bar { z-index: 2; background: var(--coral-500); }
.i40__media .speed-bar--1 { left: -6%; top: 7.8%; width: 30%; height: 8px; }
.i40__media .speed-bar--2 { left: 74.2%; top: 30.4%; width: 30%; height: 10px; }
.i40__media .speed-bar--3 { left: 12.1%; top: 99.2%; width: 34%; height: 10px; }
.i40__content { display: grid; gap: var(--space-8); justify-items: start; max-width: 640px; }
.i40__titles { display: grid; gap: var(--space-4); }
.i40__titles .t-h2 { line-height: 1.296; letter-spacing: -0.02em; max-width: 500px; }
.i40__titles p { font-size: var(--fs-lead); line-height: 1.5; color: rgba(255,255,255,.78); }
@media (max-width: 960px) { .i40__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 05 · PRODUÇÃO ---------- */
.prod__grid { display: grid; grid-template-columns: minmax(0, 618px) minmax(0, 660px); align-items: center; gap: 0; }
.prod__content { display: grid; gap: var(--space-8); justify-items: start; }
.prod__titles { display: grid; gap: var(--space-3); max-width: 536px; }
.prod__titles .t-h2 { letter-spacing: -0.02em; max-width: 424px; }
.prod__visual { padding: 41px; }
.prod__stage { position: relative; zoom: .9; padding-bottom: 56px; margin-right: 28px; }
@media (max-width: 1000px) { .prod__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-12); } }
@media (max-width: 700px) { .prod__visual { padding: 0; } .prod__stage { zoom: .8; margin-right: 0; } }

/* Mock: Painel de Produção por Fase (média fidelidade, baseado na tela oficial do ERP) */
.pk { background: #fff; border-radius: var(--radius-md); border: 1px solid var(--color-border); box-shadow: var(--shadow-lg); overflow: hidden; font-size: 12px; color: var(--grafite-800); }
.pk__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 16px 10px; }
.pk__title { font-weight: 700; font-size: 14px; line-height: 1.2; }
.pk__crumb { margin-top: 3px; font-size: 10.5px; color: var(--grafite-200); }
.pk__crumb b { color: var(--coral-600); font-weight: 600; }
.pk__actions { display: flex; gap: 6px; }
.pk__actions i { width: 20px; height: 20px; border-radius: 50%; background: var(--branco-500); display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 10px; color: var(--grafite-500); }
.pk__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 12px; border: 1px solid var(--color-border); border-radius: 8px 8px 0 0; background: var(--branco-300); }
.pk__tab { padding: 8px 12px; background: #fff; border-right: 1px solid var(--color-border); border-radius: 8px 0 0 0; font-weight: 500; }
.pk__tools { display: flex; align-items: center; gap: 10px; padding-right: 6px; color: var(--grafite-500); font-size: 11px; }
.pk__tools span { display: inline-flex; align-items: center; gap: 5px; }
.pk__tools svg { width: 13px; height: 13px; }
.pk__search { border: 1px solid var(--color-border); background: #fff; border-radius: 6px; padding: 3px 8px; }
.pk__board { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 28px; gap: 8px; padding: 10px 12px 12px; margin: 0 12px 12px; border: 1px solid var(--color-border); border-top: 0; border-radius: 0 0 8px 8px; background: var(--branco-500); overflow: hidden; }
.pk__col { background: #fff; border-radius: 8px; overflow: hidden; border: 1px solid var(--color-border); display: grid; align-content: start; }
.pk__col--peek { opacity: .5; }
.pk__colhead { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 7px 8px 7px 10px; background: var(--grafite-800); color: #fff; font-weight: 700; font-size: 10px; letter-spacing: .02em; white-space: nowrap; }
.pk__colhead b { overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.pk__colhead span { flex: none; font-weight: 600; font-size: 9.5px; padding: 1px 6px; border-radius: 999px; background: rgba(255,255,255,.14); }
.pk__cards { display: grid; gap: 8px; padding: 8px; }
.pk__card { border: 1px solid var(--color-border); border-radius: 8px; padding: 8px 9px; display: grid; gap: 6px; box-shadow: var(--shadow-sm); }
.pk__card--active { border-color: var(--coral-300); box-shadow: 0 0 0 3px var(--coral-50); }
.pk__op { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 12.5px; }
.pk__op svg { width: 12px; height: 12px; color: var(--grafite-300); }
.pk__body { display: grid; grid-template-columns: minmax(0, 1fr) 40px; gap: 8px; align-items: start; }
.pk__fields { display: grid; gap: 3px; min-width: 0; }
.pk__fields span { display: block; font-size: 10.5px; line-height: 1.45; color: var(--grafite-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk__fields svg { display: inline-block; vertical-align: -1px; width: 10px; height: 10px; margin-right: 4px; color: var(--grafite-200); }
.pk__thumb { width: 40px; height: 40px; border-radius: 6px; background: var(--branco-500); display: grid; place-items: center; color: var(--grafite-800); }
.pk__thumb svg { width: 28px; height: 28px; }
.pk__status { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 3px 6px; border-radius: 999px; font-size: 10px; font-weight: 600; border: 1px solid; }
.pk__status svg { width: 10px; height: 10px; }
.pk__status--late { color: var(--coral-700); border-color: var(--coral-200); background: var(--coral-50); }
.pk__status--ok { color: #1F7A4D; border-color: #BFE3CF; background: #F1F8F4; }
.pk__status--today { color: #8A5B00; border-color: #F0D9A6; background: #FFF8E8; }
.pk__fade { position: absolute; top: 0; right: 0; bottom: 0; width: 80px; background: linear-gradient(90deg, rgba(245,245,245,0), var(--branco-500) 75%); pointer-events: none; }

.apont {
  position: absolute; right: -28px; bottom: 0; width: min(280px, 58%);
  background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); border: 1px solid var(--color-border);
  padding: 16px; display: grid; gap: 12px; font-size: 12px;
}
.apont__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.apont__head strong { font-size: 14px; }
.apont__pill { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--coral-50); color: var(--coral-700); font-weight: 600; font-size: 11px; white-space: nowrap; }
.apont__row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.apont__field { display: grid; gap: 4px; }
.apont__field label { color: var(--grafite-300); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; }
.apont__field div { height: 30px; border-radius: 6px; border: 1px solid var(--branco-700); display: flex; align-items: center; padding: 0 10px; font-weight: 500; }
.apont__btn { height: 34px; border-radius: 8px; background: var(--coral-action); color: #fff; display: grid; place-items: center; font-weight: 600; }
@media (max-width: 700px) {
  .pk__board { grid-template-columns: repeat(2, minmax(0, 1fr)) 24px; }
  .pk__col:nth-child(3) { display: none; }
  .pk__tools span:first-child { display: none; }
  .apont { right: 8px; width: 74%; }
}

/* ---------- 06 · COMPLIANCE ---------- */
.compliance .head .t-h2 { max-width: none; }
.compliance__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin-top: 64px; }
.compliance .num-card:hover { transform: none; box-shadow: none; }
.compliance .num-card__bar { background: var(--coral-500); margin-bottom: var(--space-4); }
.compliance .num-card { gap: var(--space-3); }
.compliance .num-card__num { font-size: .875rem; letter-spacing: .04em; color: var(--coral-600); }
.compliance .num-card__title { line-height: 1.2; letter-spacing: -0.01em; }
@media (max-width: 900px) { .compliance__cards { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 07 · WORKSPACE ---------- */
.ui-pill { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--branco-500); color: var(--grafite-500); font-weight: 500; font-size: 11px; white-space: nowrap; }
.ui-pill--coral { background: var(--coral-50); color: var(--coral-700); }
.workspace .head .t-h2 { letter-spacing: -0.02em; max-width: 546px; }
.workspace .carousel { margin-top: 64px; }
/* Carrossel sangrando até as bordas da janela: o painel seguinte aparece sem corte seco no container */
.workspace .carousel__track {
  /* --vw = largura útil da janela (sem a barra de rolagem), medida via JS; 100vw como fallback */
  --bleed: max(var(--gutter), calc((var(--vw, 100vw) - 1278px) / 2));
  --fade: min(56px, var(--bleed));
  margin-inline: calc(50% - var(--vw, 100vw) / 2);
  padding: 24px var(--bleed) 32px;
  margin-block: -24px -32px;
  scroll-padding-inline: var(--bleed);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
}
.workspace .carousel__track::after { content: ""; flex: 0 0 1px; }
.workspace__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-8); flex-wrap: wrap; margin-top: 64px; }
.workspace__foot p { max-width: 599px; }
.workspace .carousel__track { align-items: stretch; }
.carousel__slide { display: flex; min-width: 0; }
.dash { flex: 1; min-width: 0; overflow: hidden; display: flex; background: var(--branco-500); border-radius: var(--radius-md); padding: clamp(10px, 1.6vw, 20px); }
/* Os painéis têm layout fixo de 940px e são reduzidos proporcionalmente (via JS) quando o slide é mais estreito:
   continuam horizontais e com a mesma altura entre si */
.dash__scaler { width: 940px; flex: none; display: flex; }
.dash__scaler > .dash__window { flex: 1; display: flex; flex-direction: column; }
.dash__body { flex: 1; align-content: start; }
.dash__window { background: #fff; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-md); font-size: 12px; }
.dash__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--color-border); }
.dash__title { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; }
.dash__title i { width: 26px; height: 26px; border-radius: 7px; background: var(--coral-500); display: grid; place-items: center; color: #fff; }
.dash__title i svg { width: 15px; height: 15px; }
.dash__filters { display: flex; gap: 6px; }
.dash__body { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 18px; }
.kpi { border: 1px solid var(--color-border); border-radius: 10px; padding: 12px 14px; display: grid; gap: 4px; }
.kpi span { color: var(--grafite-300); font-size: 11px; }
.kpi strong { font-size: clamp(16px, 1.6vw, 22px); letter-spacing: -0.02em; font-weight: 600; }
.kpi em { font-style: normal; font-size: 11px; font-weight: 600; color: #1F7A4D; }
.kpi em.down { color: var(--coral-600); }
.panel { border: 1px solid var(--color-border); border-radius: 10px; padding: 14px; display: grid; gap: 10px; align-content: start; }
.panel__head { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 12px; }
.panel__head span { color: var(--grafite-300); font-weight: 400; font-size: 11px; }
.panel--wide { grid-column: span 3; }
.panel--half { grid-column: span 2; }
.panel svg { width: 100%; height: auto; }
.legend { display: flex; gap: 12px; flex-wrap: wrap; color: var(--grafite-300); font-size: 11px; }
.legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: 0; }
.mini-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.mini-table th { text-align: left; color: var(--grafite-300); font-weight: 500; padding: 6px 0; border-bottom: 1px solid var(--color-border); }
.mini-table td { padding: 7px 0; border-bottom: 1px solid var(--branco-500); }
.mini-table td:last-child, .mini-table th:last-child { text-align: right; }
.hbar { display: grid; gap: 10px; }
.hbar__row { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; font-size: 11.5px; }
.hbar__row b { font-weight: 600; }
.hbar__track { grid-column: 1 / -1; height: 6px; border-radius: 6px; background: var(--branco-700); overflow: hidden; }
.hbar__track i { display: block; height: 100%; border-radius: 6px; background: var(--coral-200); }
.hbar__row:first-child .hbar__track i { background: var(--coral-500); }
.dash__caption { margin-top: var(--space-3); font-size: 12px; color: var(--grafite-300); text-align: right; }

/* ---------- 08 · CLOUD APPS (grafite) ---------- */
.cloud .head { gap: var(--space-6); }
.cloud .head .t-h2 { line-height: 1.296; letter-spacing: -0.02em; max-width: 492px; }
.cloud__text { font-size: var(--fs-lead); line-height: 1.5; color: rgba(255,255,255,.92); margin-top: var(--space-6); }
/* Título e texto de apoio lado a lado no desktop (mesmo padrão da Geração 8) */
.cloud__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: clamp(40px, 7vw, 96px); }
.cloud__head .cloud__text { margin-top: 0; }
@media (max-width: 860px) { .cloud__head { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); } }
.cloud__cards { display: grid; grid-template-columns: 1fr 1.13fr 1fr 1.13fr; gap: var(--space-6); margin-top: 64px; }
.cloud .app-card { box-shadow: 0 1px 1px rgba(25,25,26,.06), 0 1px 1.5px rgba(25,25,26,.06); }
.cloud .app-card:hover { transform: none; }
.cloud .app-card__icon { margin-bottom: var(--space-2); }
.cloud .app-card__title { font-size: 1.125rem; line-height: 1.3; }
.cloud .app-card__text { line-height: 1.5; }
@media (max-width: 1180px) { .cloud__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cloud__cards { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 09 · SOLUÇÕES ---------- */
.solucoes .head .t-h2 { line-height: 1.1; letter-spacing: -0.02em; max-width: 506px; }
.head-row > .solucoes__sub { max-width: 581px; }
.solucoes__sub { font-size: var(--fs-lead); line-height: 1.2; letter-spacing: -0.02em; color: rgba(46,46,48,.6); max-width: 29em; }
.solucoes__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); margin-top: 64px; }
.sol-card { background: var(--branco-500); border-radius: var(--radius-md); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.sol-card__icon { height: 122px; width: auto; align-self: flex-start; mix-blend-mode: multiply; }
.sol-card__title { font-size: 1.25rem; line-height: 1.2; font-weight: 600; padding: 24px 0 8px; border-bottom: 1px solid var(--coral-action); }
.sol-card__text { color: rgba(46,46,48,.6); line-height: 1.5; }
@media (max-width: 1040px) { .solucoes__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .solucoes__cards { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 10 · EXPERIÊNCIA + CLIENTES ---------- */
.exp__head { display: grid; justify-items: center; text-align: center; gap: var(--space-6); }
.exp__head .logo { width: 206px; height: auto; color: var(--grafite-800); }
.exp__head p { max-width: 1054px; }
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin-top: 48px; height: 490px; }
.bento__col { display: grid; grid-template-rows: 1fr 1fr; gap: var(--space-3); min-height: 0; }
.bento__photo { border-radius: var(--radius-md); overflow: hidden; }
.bento__photo img { width: 100%; height: 100%; object-fit: cover; }
.b-card { border-radius: var(--radius-md); padding: var(--space-8); color: #fff; display: flex; flex-direction: column; justify-content: space-between; min-height: 0; }
.b-card--dark { background: var(--grafite-800); justify-content: flex-end; }
.b-card--coral { background: var(--coral-action); }
.b-card__icon { width: 28px; height: 28px; }
.b-card__body { display: grid; gap: var(--space-2); }
.b-card__label { font-size: .875rem; line-height: 1.5; opacity: .7; }
.b-card__value { font-size: clamp(2.25rem, 1.8rem + 1.2vw, 3rem); line-height: .92; letter-spacing: -0.02em; font-weight: 300; white-space: nowrap; }
.b-card__desc { font-size: 1.25rem; line-height: 1.3; }
.b-card__desc--narrow { max-width: 285px; }
@media (max-width: 1040px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; }
  .bento__photo { grid-column: 1 / -1; grid-row: 1; height: 360px; }
  .b-card { min-height: 200px; }
}
@media (max-width: 600px) {
  .bento { grid-template-columns: minmax(0, 1fr); }
  .bento__col { grid-template-rows: auto; }
  .bento__photo { height: 280px; }
}

/* Faixa de clientes/parceiros (marquee) */
.logos { position: relative; overflow: hidden; margin-top: 48px; padding-block: 28px; }
.logos::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,0) 19.6%, rgba(255,255,255,0) 80%, #fff 100%); }
.logos__track { display: flex; align-items: center; gap: 56px; width: max-content; animation: logos 60s linear infinite; }
.logos:hover .logos__track { animation-play-state: paused; }
.logos__img { flex: none; height: auto; max-width: none; opacity: .72; transition: opacity var(--dur-base); }
.logos__img:hover { opacity: 1; }
@keyframes logos { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .logos__track { animation: none; } }

/* ---------- 11 · CTA FINAL ---------- */
.cta { padding-top: 0; }
.cta__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 608px); gap: clamp(48px, 9vw, 128px); align-items: center; }
.cta__content { display: grid; gap: var(--space-8); justify-items: start; }
.cta__content .t-h2 { max-width: 400px; }
.cta__content p { color: var(--grafite-500); max-width: 480px; }
.cta__content .btn { height: auto; padding: 12px 24px; }
.cta__media { aspect-ratio: 608 / 339; border-radius: var(--radius-lg); overflow: hidden; }
.cta__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .cta__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- BANNER · ATUALIZAÇÃO (antes do rodapé) ---------- */
.update { padding-top: 0; }
.update__card {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(24px, 4vw, 56px);
  padding: clamp(32px, 4vw, 56px); border-radius: var(--radius-lg); background: var(--branco-500); position: relative; overflow: hidden;
}
.update__card::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(closest-side, rgba(223,82,65,.10), transparent); pointer-events: none; }
.update__icon { width: 72px; height: 72px; border-radius: 16px; display: grid; place-items: center; background: var(--grafite-800); color: #fff; }
.update__icon svg { width: 34px; height: 34px; }
.update__content { display: grid; gap: var(--space-3); justify-items: start; }
.update__content .t-h2 { max-width: 18em; }
.update__content .lead-muted { max-width: 34em; }
.update__btn svg { width: 18px; height: 18px; }
@media (max-width: 960px) { .update__card { grid-template-columns: minmax(0, 1fr); } }

/* Rodapé — largura interna do protótipo */
.site-footer .container { max-width: calc(1280px + var(--gutter) * 2); }

/* ---------- HOVER (sucinto; só em dispositivos com ponteiro) ---------- */
.feature__icon, .num-card, .app-card, .sol-card, .sol-card__icon, .b-card, .dash, .clara__visual img,
.media img, .cta__media img, .bento__photo img, .sol-card__title { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background-color var(--dur-base), border-color var(--dur-base); }
.media img, .cta__media img, .bento__photo img { transition-duration: 900ms; }
@media (hover: hover) {
  .feature:hover .feature__icon { transform: translateY(-3px); background: var(--coral-action); }
  .compliance .num-card:hover { transform: translateY(-4px); border-color: var(--coral-200); box-shadow: var(--shadow-md); }
  .cloud .app-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(0,0,0,.28); }
  .sol-card:hover { background: #EFEFEF; }
  .sol-card:hover .sol-card__icon { transform: translateY(-4px) scale(1.04); }
  .b-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
  .dash:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
  .clara__visual:hover img { transform: translateY(-4px); }
  .media:hover img, .cta__media:hover img, .bento__photo:hover img { transform: scale(1.04); }
}

/* ---------- 8.1 animado (hero) ---------- */
.logotema { width: 100%; max-width: 388px; height: auto; overflow: visible; }
.logotema path, .logotema rect { transform-box: fill-box; transform-origin: center; }
.logotema__halo { animation: lt-halo 1.1s var(--ease-out) both, lt-breathe 6s ease-in-out 1.2s infinite; }
.logotema__eight { animation: lt-rise .9s var(--ease-out) .15s both; }
.logotema__one { animation: lt-rise .9s var(--ease-out) .3s both; }
/* Ponto: sobe deslocado à esquerda e, ao terminar, desliza para a direita até encaixar.
   Cada trecho usa ease-out (começa rápido, termina devagar). */
.logotema__dot { animation: lt-dot 1s .6s both; }
@keyframes lt-halo { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }
@keyframes lt-breathe { 0%, 100% { transform: none; } 50% { transform: scale(1.05); } }
@keyframes lt-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes lt-dot {
  0%   { opacity: 0; transform: translate(-60%, 160%); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  20%  { opacity: 1; }
  55%  { transform: translate(-60%, 0); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  100% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .logotema * { animation: none !important; } }

/* ---------- PARALLAX ---------- */
[data-parallax] { translate: 0 var(--py, 0px); will-change: translate; }
/* Fotos: a imagem se move dentro da moldura (levemente ampliada para não mostrar bordas) */
.plx-img { overflow: hidden; }
.plx-img img { scale: 1.14; }
.plx-img img[data-parallax] { translate: 0 var(--py, 0px); }
@media (prefers-reduced-motion: reduce) { [data-parallax] { translate: none !important; } .plx-img img { scale: 1; } }

/* ---------- MOBILE (≤ 760px) ---------- */
@media (max-width: 760px) {
  :root { --section-y: 64px; }
  .section { padding-block: 64px; }

  /* Hero: logo ERP · título · apoio · 8.1 · botões */
  .hero { padding-block: 40px 64px; }
  .hero__grid { gap: var(--space-6); }
  .hero__content { display: contents; }
  .hero__content > .submarca { order: 1; }
  .hero__title { order: 2; }
  .hero__text { order: 3; }
  .hero__mark { order: 4; padding: 8px 0; justify-self: center; place-items: center; }
  .hero__mark .logotema { width: 220px; max-width: 220px; }
  .hero__actions { order: 5; }
  /* Hero centralizada */
  .hero__grid { justify-items: center; text-align: center; }
  .hero__content > .submarca { justify-self: center; }
  .hero__title, .hero__text { margin-inline: auto; }

  /* Clara IA: botão abaixo da ilustração */
  .clara__grid { gap: var(--space-8); }
  .clara__content { display: contents; }
  .clara__content > * { justify-self: start; }
  .clara__visual { order: 1; justify-self: center; }
  .clara__content > .btn { order: 2; }

  /* Textos de apoio fixos em 16px */
  .hero__text, .lead-muted, .t-lead, .cloud__text, .i40__titles p, .solucoes__sub, .exp__head p { font-size: 16px; line-height: 1.5; }
  .dash { border-radius: 12px; padding: 8px; }

  /* Botões sempre em largura total */
  main .btn { width: 100%; }
  .hero__actions { width: 100%; }

  /* Geração 8: mais respiro entre os recursos */
  .gen8 .feature-row { row-gap: 0; }
  .gen8 .feature-row { padding: 8px 24px; }
  .gen8 .feature { padding-block: 32px; border-top-color: rgba(255,255,255,.12); }
  .gen8 .feature:first-child { padding-top: 24px; }
  .gen8 .feature:last-child { padding-bottom: 24px; }

  /* Seções grafite: padding interno uniforme */
  .section--dark, .i40 { padding: 32px; }
  .section--dark > .container { padding-inline: 0; }
  .i40__grid, .cloud__cards { gap: var(--space-8); }
  .cloud__cards { margin-top: var(--space-8); }

  /* Workspace: texto e botão junto do título; carrossel abaixo */
  .workspace > .container { display: flex; flex-direction: column; }
  .workspace .head { order: 1; }
  .workspace__foot { order: 2; margin-top: var(--space-6); }
  .workspace .carousel { order: 3; margin-top: var(--space-10); }
  .carousel__arrows { display: none; }
  .carousel__controls { justify-content: center; margin-top: var(--space-6); }
  .dash__caption { text-align: center; }
  .carousel__slide { flex-basis: 92%; }

  /* Parallax mais contido no mobile: sem deslocar o 8.1 e as barras sobre o texto */
  .hero__mark[data-parallax], .i40__media .speed-bar[data-parallax], .clara__visual [data-parallax] { translate: none; }
  .i40__media .speed-bar--3 { top: auto; bottom: -5px; }
}

/* ---------- Clara IA recriada em código (substitui clara-visual.jpg) ---------- */
.clara-mock { position: relative; width: 100%; aspect-ratio: 1; container-type: inline-size; font-family: var(--font-sans); color: var(--grafite-800); }
.clm-ring { position: absolute; border-radius: 50%; border: 1px solid #EDEDED; pointer-events: none; }
.clm-ring--1 { inset: 0; border-color: #F2F2F2; }
.clm-ring--2 { inset: 6.2%; }
.clm-ring--3 { inset: 12.2%; border-color: #E6E6E6; }
.clm-win { position: absolute; left: 17.3%; top: 11%; width: 65.4%; height: 72.3%; display: flex; flex-direction: column; background: #fff; border-radius: 2.6cqw; border: .25cqw solid #F2F2F2; box-shadow: 0 2cqw 5cqw rgba(25,25,26,.06); overflow: hidden; }
.clm-bar { flex: none; height: 11.2%; background: var(--coral-500); display: flex; justify-content: flex-end; align-items: center; gap: 3cqw; padding-right: 3.2cqw; color: #fff; }
.clm-bar svg { width: 2.4cqw; height: 2.4cqw; }
.clm-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5cqw; padding-top: 2cqw; }
.clara__visual .clm-logo, .clm-logo { width: 21cqw; height: 21cqw; max-width: none; overflow: visible; fill: #2E2E30; }
.clm-hello { display: grid; justify-items: center; gap: .6cqw; text-align: center; line-height: 1.1; }
.clm-hello b { font-size: 4.6cqw; font-weight: 700; letter-spacing: -0.02em; }
.clm-hello span { font-size: 3.1cqw; color: var(--grafite-300); }
.clm-input { flex: none; margin: 0 1.6cqw 1.6cqw; height: 14.6cqw; border-radius: 2.2cqw; border: .16cqw solid #9E9E9E; background: var(--branco-500); padding: 2.6cqw 2.2cqw 2cqw; display: flex; flex-direction: column; justify-content: space-between; }
.clm-input > span:first-child { font-size: 2cqw; color: var(--grafite-300); }
.clm-input__tools { display: flex; justify-content: flex-end; align-items: center; gap: 2.2cqw; color: var(--grafite-500); }
.clm-input__tools > svg { width: 1.8cqw; height: 1.8cqw; }
.clm-input__tools i { width: 3.5cqw; height: 3.5cqw; border-radius: 50%; background: var(--coral-500); display: grid; place-items: center; }
.clm-input__tools i svg { width: 2cqw; height: 2cqw; }
.clm-float { position: absolute; width: 8.5cqw; height: 8.5cqw; border-radius: 1.8cqw; background: var(--grafite-800); display: grid; place-items: center; color: #fff; box-shadow: 0 1.2cqw 3cqw rgba(25,25,26,.18); animation: clm-float 6s ease-in-out infinite; }
.clm-float > svg:first-child { width: 4.8cqw; height: 4.8cqw; stroke-width: 2; }
.clm-float__spark { position: absolute; right: 1.5cqw; bottom: 1.5cqw; width: 2.1cqw; height: 2.1cqw; }
.clm-float--chat { left: 1.9%; top: 23.4%; animation-delay: -1s; }
.clm-float--spark { left: 80.5%; top: 7.4%; animation-delay: -3s; }
.clm-float--edit { left: 10.4%; top: 84%; animation-delay: -2s; }
.clm-float--tree { left: 89.6%; top: 77.8%; animation-delay: -4.5s; }
@keyframes clm-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.2cqw); } }
@media (prefers-reduced-motion: reduce) { .clm-float { animation: none; } }

/* ---------- Clara: animações ----------
   Entrada (quando a seção aparece): janela sobe, ícone gira e encaixa, saudação aparece,
   campo de texto "digita" a sugestão e os ícones flutuantes surgem um a um.
   Ícone em loop contínuo: anel gira devagar (28s/volta), pontos pulsam em onda (2,8s) e a estrela só respira, sem girar (4,2s) (comportamento do icon_clara_hover.svg). */
.clm-logo__dots, .clm-logo__star { transform-box: fill-box; transform-origin: center; }
.clm-logo__dots { transform-box: view-box; transform-origin: 74px 75px; }
.clara-mock .clm-win, .clara-mock .clm-ring, .clara-mock .clm-hello > *, .clara-mock .clm-input, .clara-mock .clm-float { animation-play-state: paused; }
.clara__visual.is-visible .clara-mock *, .no-js .clara-mock * { animation-play-state: running; }
.clm-win { animation: clm-win .9s var(--ease-out) .1s both; }
.clm-ring { animation: clm-ring 1.4s var(--ease-out) both; }
.clm-ring--2 { animation-delay: .1s; } .clm-ring--3 { animation-delay: .2s; }
/* Entrada e, em seguida, loop do icon_clara_hover: anel gira 270° (simetria de 90°, sem salto) e a estrela pulsa */
/* Movimento contínuo (sem paradas): anel gira devagar, pontos "respiram" em onda, estrela pulsa e balança de leve */
.clm-logo__dots { will-change: transform; animation: clm-spin 1.1s cubic-bezier(.22, 1, .36, 1) .5s both, clm-orbit 28s linear 1.6s infinite; }
.clm-logo__star { will-change: transform; animation: clm-pop .8s cubic-bezier(.3, 1.5, .5, 1) .55s both, clm-breathe 4.2s ease-in-out 1.4s infinite; }
.clm-logo__dots path { transform-box: fill-box; transform-origin: center; animation: clm-dot 2.8s ease-in-out infinite; }
.clm-logo__dots path:nth-child(1) { animation-delay: -0.35s; } .clm-logo__dots path:nth-child(2) { animation-delay: 0s; }
.clm-logo__dots path:nth-child(5) { animation-delay: -2.45s; } .clm-logo__dots path:nth-child(4) { animation-delay: -2.1s; }
.clm-logo__dots path:nth-child(8) { animation-delay: -1.75s; } .clm-logo__dots path:nth-child(7) { animation-delay: -1.4s; }
.clm-logo__dots path:nth-child(6) { animation-delay: -1.05s; } .clm-logo__dots path:nth-child(3) { animation-delay: -0.7s; }
.clm-hello > b { animation: clm-up .6s var(--ease-out) .9s both; }
.clm-hello > span { animation: clm-up .6s var(--ease-out) 1s both; }
.clm-input { animation: clm-up .6s var(--ease-out) 1.1s both; }
.clm-float { animation: clm-in .6s cubic-bezier(.3, 1.5, .5, 1) both, clm-float 6s ease-in-out infinite; }
.clm-float--chat { animation-delay: 1.3s, 2s; } .clm-float--spark { animation-delay: 1.4s, 3s; }
.clm-float--edit { animation-delay: 1.5s, 2.5s; } .clm-float--tree { animation-delay: 1.6s, 3.5s; }
.clara__visual.is-visible .clm-logo__dots, .clara__visual.is-visible .clm-logo__star { animation-play-state: running; }
.clm-logo__dots, .clm-logo__star { animation-play-state: paused; }
.clm-float { transition: transform var(--dur-base) var(--ease-out); }
.clm-input__tools i { transition: transform var(--dur-fast) var(--ease-out); }
.clara-mock:hover .clm-input__tools i { transform: scale(1.12); }
/* Caret piscando no fim do texto digitado */
.clm-typing::after { content: ""; display: inline-block; width: .15cqw; height: 2.2cqw; margin-left: .3cqw; vertical-align: -.35cqw; background: var(--grafite-500); animation: clm-caret 1s steps(1) infinite; }
@keyframes clm-win { from { opacity: 0; transform: translateY(4cqw) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes clm-ring { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes clm-spin { from { opacity: 0; transform: rotate(-120deg) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes clm-pop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }
@keyframes clm-up { from { opacity: 0; transform: translateY(1.5cqw); } to { opacity: 1; transform: none; } }
@keyframes clm-in { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes clm-orbit { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes clm-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(.8); } }
@keyframes clm-dot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.62); opacity: .55; } }
@keyframes clm-caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .clara-mock *, .clara-mock *::after { animation: none !important; }
}

/* Eyebrow + título formam um bloco único (flex próprio, 12px entre eles).
   Texto de apoio ABAIXO do título fica a 20px do título (12 + 8); texto AO LADO (v-head, cloud__head) não tem margem. */
.title-group { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
/* Texto de apoio → demais elementos (botões, chips, listas): --space-8 (gap dos blocos). Título → texto continua 20px. */
.page-hero__content > .title-group + *, .split__content > .title-group + *, .split__content > .t-h2 + *,
.cta__content > .t-h2 + *, .testimonial__content > .t-h2 + *, .v-areas__inner > .t-h2 + * { margin-top: -12px; }   /* gap 32 → 20 */
.clara__content > .clara__titles + .clara__body { margin-top: -12px; }                                               /* gap 32 → 20 */
.head > .title-group + *, .head > .t-h2 + * { margin-top: 4px; }                                    /* gap 16 → 20 */
.update__content > .title-group + * { margin-top: 8px; }                                            /* gap 12 → 20 */
.i40__titles, .prod__titles { gap: 20px; }

/* Monitoramento (Indústria 4.0): telas oficiais do Apontamento/Monitoramento de Fábrica (src/mocks_monitor.py).
   Layout de 940px dentro do .dash__scaler; cores de status do sistema (verde/vermelho/amarelo/laranja); o que era do tema azul do sistema (breadcrumb, voltar, ícones do título, botões primários, seleção) segue o coral da 8.1
   com refino estético: raios e sombras suaves, bordas leves, números tabulares */
.erp { --ok: #21BA45; --stop: #DB2828; --free: #FBBD08; --blue: var(--coral-action); --theme-ink: var(--coral-600); --warn: #F2711C; --ink: #1B1D21; --mute: #646A73; --bd: #E3E5E9;
  --sh: 0 1px 2px rgba(16,24,40,.05), 0 0 0 1px rgba(16,24,40,.04);
  background: #F2F3F5; color: var(--ink); font-size: 11px; line-height: 1.25; font-variant-numeric: tabular-nums; }
.erp svg { width: 1em; height: 1em; flex: none; }
.erp__head { margin: 0 12px; padding: 11px 2px 8px; border-bottom: 1px solid #DDDFE3; }
.erp__head strong { display: block; font-size: 14px; font-weight: 650; letter-spacing: -.015em; }
.erp__crumbs { display: flex; gap: 6px; margin-top: 3px; font-size: 9.5px; color: #A3A8B0; white-space: nowrap; }
.erp__crumbs span::after { content: "›"; margin-left: 6px; color: #C4C8CE; }
.erp__crumbs b { color: var(--theme-ink); font-weight: 600; }
.erp__body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 9px 9px 12px; }
.erp-card { background: #fff; border-radius: 12px; box-shadow: var(--sh); padding: 12px 16px; }
.erp-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding-block: 8px; }
.erp-bar__l { display: flex; align-items: center; gap: 10px; }
.erp-bar__l b { font-size: 12.5px; font-weight: 650; letter-spacing: -.005em; }
.erp-back { width: 26px; height: 24px; display: grid; place-items: center; border: 1px solid var(--coral-300); border-radius: 6px; color: var(--theme-ink); font-size: 14px; }
.erp-ico { display: grid; font-size: 22px; }
.erp-ico--teal, .erp-ico--blue { color: var(--coral-action); } .erp-ico--red { color: var(--stop); }
.erp-bar__r { display: flex; gap: 12px; }
.erp-pill { width: 136px; padding: 5px 10px; border-radius: 6px; background: var(--ok); color: #fff; font-size: 11px; font-weight: 650; letter-spacing: .04em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(33,186,69,.25); }
/* 1 · seleção do recurso */
.erp-recs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding-block: 14px; }
.erp-rec { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 8px 8px 13px; border: 1px solid var(--bd); border-radius: 8px; text-align: center; box-shadow: 0 1px 1px rgba(16,24,40,.03); }
.erp-rec strong { font-size: 11.5px; font-weight: 650; letter-spacing: .01em; }
.erp-tag { padding: 3px 9px; border-radius: 999px; color: #fff; font-size: 9px; font-weight: 650; letter-spacing: .05em; }
.erp-tag--ok { background: var(--ok); } .erp-tag--stop { background: var(--stop); }
/* 2 · apontamento de produção */
.erp-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 14px; padding-block: 14px 18px; }
.erp-field { position: relative; min-height: 46px; padding: 7px 30px 7px 12px; border: 1px solid var(--bd); border-radius: 7px; box-shadow: inset 3px 0 0 var(--accent, var(--ink)); }
.erp-field > span:first-child { display: block; font-size: 9.5px; color: var(--mute); }
.erp-field strong { display: block; margin-top: 3px; font-size: 14px; font-weight: 650; letter-spacing: -.01em; white-space: nowrap; }
.erp-field--span2 { grid-column: span 2; }
.erp-field--ok { --accent: var(--ok); } .erp-field--ok strong { color: var(--ok); }
.erp-field--stop { --accent: var(--stop); } .erp-field--stop strong { color: var(--stop); }
.erp-field--warn { --accent: var(--warn); } .erp-field--warn strong { color: var(--warn); }
.erp-field__ic { position: absolute; right: 10px; top: 50%; translate: 0 -50%; display: grid; color: #9AA0A8; font-size: 15px; }
.erp-progress { grid-column: 1 / -1; margin-top: 8px; padding-inline: 4px; }
.erp-progress div { display: flex; justify-content: space-between; font-size: 9.5px; color: var(--mute); }
.erp-progress em { font-style: normal; font-weight: 600; color: #F2A51C; }
.erp-progress i { display: block; height: 7px; margin-top: 6px; border-radius: 999px; background: #E9EBEE; }
.erp-progress i b { display: block; width: 14px; height: 100%; border-radius: inherit; background: var(--warn); }
.erp-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 18px; padding-block: 14px; }
.erp-btn { display: flex; align-items: stretch; height: 32px; border-radius: 7px; overflow: hidden; color: #fff; font-size: 12.5px; font-weight: 650; letter-spacing: -.005em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 1px 2px rgba(16,24,40,.12); }
.erp-btn i { width: 34px; display: grid; place-items: center; background: rgba(0,0,0,.1); font-size: 14px; }
.erp-btn span { flex: 1; display: grid; place-items: center; }
.erp-btn--blue { background: var(--blue); } .erp-btn--ok { background: var(--ok); } .erp-btn--stop { background: var(--stop); } .erp-btn--warn { background: var(--warn); }
.erp-btn--off { background: var(--coral-100); color: rgba(255,255,255,.95); box-shadow: none; } .erp-btn--off i { background: rgba(0,0,0,.02); }
.erp-btn--full { height: 34px; margin-top: 8px; font-size: 13px; }
/* 3 · lançamento de refugo */
.erp-refugo { flex: 1; display: grid; grid-template-columns: .72fr 1fr; gap: 20px; align-items: start; padding-block: 14px; }
.erp-lbl { display: block; margin-bottom: 7px; font-size: 10.5px; font-weight: 650; }
.erp-display { display: flex; align-items: center; justify-content: flex-end; height: 40px; padding: 0 14px; border: 1px solid var(--bd); border-radius: 8px; background: #F8F9FA;
  box-shadow: inset 0 1px 2px rgba(16,24,40,.05); font-size: 22px; font-weight: 650; }
.erp-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 6px; }
.erp-keys span { height: 29px; display: grid; place-items: center; border: 1px solid var(--bd); border-radius: 7px; background: #fff; box-shadow: 0 1px 1px rgba(16,24,40,.04); font-size: 12px; font-weight: 650; }
.erp-keys .erp-key--c { background: #FFF6F0; border-color: #F8D2B6; color: var(--warn); }
.erp-keys .erp-key--del { background: #FDF1F1; border-color: #F0C4C4; color: var(--stop); font-size: 13px; }
.erp-keys .erp-key--wide { grid-column: 1 / -1; }
.erp-opts { display: flex; flex-direction: column; gap: 5px; }
.erp-opt { display: flex; align-items: center; justify-content: space-between; height: 26px; padding: 0 10px 0 12px; border: 1px solid var(--bd); border-radius: 7px; background: #FAFBFC; font-size: 9.5px; font-weight: 600; letter-spacing: .02em; }
.erp-opt svg { font-size: 11px; color: #9AA0A8; }
.erp-opt.is-on { background: var(--coral-50); border-color: var(--coral-200); box-shadow: 0 0 0 2px rgba(223,82,65,.08); }
.erp-opt.is-on svg { color: var(--theme-ink); }
/* 4 · acompanhamento de recursos */
.erp-counts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.erp-count { padding: 7px 12px 9px; border: 1px solid color-mix(in srgb, var(--c) 45%, #fff); border-radius: 8px; box-shadow: inset 3px 0 0 var(--c); }
.erp-count span { display: block; font-size: 12.5px; color: #3A3F46; }
.erp-count strong { display: block; text-align: center; font-size: 20px; font-weight: 650; line-height: 1.1; color: var(--c); }
.erp-count--ok { --c: var(--ok); } .erp-count--stop { --c: var(--stop); } .erp-count--free { --c: var(--free); }
.erp-tiles { flex: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; align-content: start; }
.erp-tile { display: flex; flex-direction: column; align-items: center; min-height: 80px; padding: 10px 6px 8px; border-radius: 8px; text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(16,24,40,.1); }
.erp-tile span { color: #fff; font-size: 11.5px; font-weight: 650; letter-spacing: .05em; }
.erp-tile strong { margin-top: 12px; font-size: 12px; font-weight: 650; color: rgba(0,0,0,.8); }
.erp-tile small { margin-top: auto; font-size: 9px; color: rgba(0,0,0,.72); }
.erp-tile--ok { background: var(--ok); } .erp-tile--stop { background: var(--stop); } .erp-tile--free { background: var(--free); }
/* 5 · monitoramento de eficiência */
.erp-filt { display: flex; gap: 4px; padding: 6px 12px; }
.erp-filt span { width: 68px; padding: 4px 10px; border: 1px solid var(--bd); border-radius: 6px; font-size: 8.5px; color: #3A3F46; }
.erp-oees { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.erp-oee { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 10px 8px 9px; border-radius: 10px; background: #fff; box-shadow: var(--sh); text-align: center; }
.erp-badge { display: flex; align-items: center; justify-content: center; gap: 4px; width: 88%; height: 17px; border-radius: 999px; color: #fff; font-size: 8.5px; font-weight: 650; letter-spacing: .05em; }
.erp-badge::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .85; }
.erp-badge--ok { background: #00A86B; } .erp-badge--stop { background: #EF4444; } .erp-badge--free { background: #F5C518; color: var(--ink); }
.erp-oee strong { max-width: 100%; margin-top: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 650; }
.erp-oee small { margin-top: 1px; font-size: 8px; letter-spacing: .06em; color: var(--mute); }
.erp-donut { position: relative; width: 64px; height: 64px; margin: 6px 0 4px; }
.erp-donut svg { width: 100%; height: 100%; }
.erp-donut div { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.erp-donut b { color: #F04D4D; font-size: 13px; font-weight: 650; line-height: 1; letter-spacing: -.02em; }
.erp-donut span { font-size: 6.5px; font-weight: 600; margin-top: 2px; color: var(--mute); letter-spacing: .06em; }
.erp-oee em { font-style: normal; font-size: 8.5px; font-weight: 650; }
.erp-oee > i { display: block; width: 86%; height: 4px; margin-top: 4px; border-radius: 999px; background: #E9EDF2; overflow: hidden; }
.erp-oee > i b { display: block; height: 100%; border-radius: inherit; background: #00A86B; }
.erp-oee__qt { margin-top: 4px; font-size: 8.5px; font-weight: 650; }
/* 6 · detalhe da máquina */
.erp-tl, .erp-gauge { position: relative; overflow: hidden; padding-top: 13px; }
.erp-tl::before, .erp-gauge::before { content: ""; position: absolute; top: 0; left: 0; width: 86%; height: 2px; border-radius: 0 2px 2px 0; background: #EF4444; }
.erp-tl > b, .erp-gauge > b { display: block; font-size: 11.5px; font-weight: 650; letter-spacing: -.005em; }
.erp-tl > span, .erp-gauge > span { display: block; margin-top: 2px; font-size: 8.5px; color: var(--mute); }
.erp-tl__leg { display: flex; justify-content: center; gap: 14px; margin: 6px 0 12px; font-size: 9px; color: #3A3F46; }
.erp-tl__leg span { display: flex; align-items: center; gap: 5px; }
.erp-tl__leg i { width: 7px; height: 7px; border-radius: 50%; }
.erp-tl__bar { margin: 0 34px; height: 34px; border-radius: 7px; overflow: hidden; box-shadow: 0 0 0 1px #334155, 0 2px 6px rgba(16,24,40,.12); }
.erp-tl__bar svg { display: block; width: 100%; height: 100%; }
.erp-tl__ticks { display: flex; justify-content: space-between; margin: 4px 24px 0; font-size: 8px; color: var(--mute); }
.erp-tl__tot { display: grid; grid-template-columns: repeat(6, 1fr); margin: 10px 34px 4px; border: 1px solid #CBD2DC; border-radius: 7px; overflow: hidden; }
.erp-tl__tot div { padding: 6px 4px; text-align: center; font-size: 8.5px; line-height: 1.2; color: #2A2F36; }
.erp-tl__tot div + div { border-left: 1px solid #CBD2DC; }
.erp-gauges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.erp-gauge { padding-bottom: 10px; }
.erp-gauge__dial { position: relative; width: 108px; height: 108px; margin: 8px auto 0; }
.erp-gauge__dial svg { width: 100%; height: 100%; }
.erp-gauge__dial div { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.erp-gauge__dial strong { font-size: 15px; font-weight: 650; color: #334155; line-height: 1; letter-spacing: -.02em; }
.erp-gauge__dial em { margin-top: 3px; font-style: normal; font-size: 8px; font-weight: 650; }
.erp-gauge__dial small { font-size: 7px; color: var(--mute); }
/* Workspace (home e hero da página Dados): painéis recriados do Figma, só com dados fictícios (src/mocks_workspace.py) */
.wsx-row { display: grid; gap: 8px; }
.wsx-r1 { grid-template-columns: minmax(0, 1fr); }
.wsx-r2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wsx-r2b { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.wsx-r3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wsx-r4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wsx-r5 { grid-template-columns: 1.5fr 1fr 1.5fr 1fr 1fr; }
.wsx-r5p { grid-template-columns: 1fr 1fr 2fr 1fr 1fr; }
.wsx-card { display: flex; flex-direction: column; min-width: 0; padding: 10px 12px 12px; }
.wsx-t { font-size: 10.5px; font-weight: 650; letter-spacing: -.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wsx-s { margin-top: 1px; font-size: 8px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wsx-kpi { min-height: 76px; }
.wsx-val { margin-top: 8px; font-size: 15px; font-weight: 500; letter-spacing: -.01em; line-height: 1.1; }
.wsx-lab { margin-top: 2px; font-size: 8.5px; font-weight: 650; letter-spacing: .03em; text-transform: uppercase; }
.wsx-hbars { display: grid; gap: 4px; margin-top: 10px; }
.wsx-hb { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 6px; font-size: 7.5px; }
.wsx-hb > span { text-align: right; color: var(--mute); white-space: nowrap; }
.wsx-hb i { display: flex; align-items: center; gap: 4px; height: 9px; border-left: 1px solid #DDDFE3; }
.wsx-hb b { display: block; height: 100%; border-radius: 0 2px 2px 0; }
.wsx-hb em { font-style: normal; font-size: 7.5px; white-space: nowrap; }
.wsx-vbars { display: flex; align-items: flex-end; gap: 6px; height: 104px; margin: 12px 4px 14px; padding: 0 4px; border-bottom: 1px solid #DDDFE3; }
.wsx-vb { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.wsx-vb i { position: relative; flex: 0 1 14px; min-height: 1px; border-radius: 2px 2px 0 0; }
.wsx-vb em { position: absolute; bottom: 100%; left: 50%; translate: -50% -2px; font-style: normal; font-size: 7px; color: var(--ink); }
.wsx-vb > span { position: absolute; top: 100%; margin-top: 3px; font-size: 7.5px; color: var(--mute); white-space: nowrap; }
.wsx-short .wsx-vbars { height: 56px; }
.wsx-leg { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; margin-top: auto; padding-top: 6px; font-size: 8px; color: #3A3F46; }
.wsx-leg span { display: inline-flex; align-items: center; gap: 4px; }
.wsx-leg i { width: 9px; height: 7px; border-radius: 2px; }
.erp .wsx-donut { width: 104px; height: 104px; margin: 12px auto 0; }
.wsx-dn { align-items: stretch; }
.wsx-tbl { width: 100%; margin-top: 8px; border-collapse: collapse; font-size: 8.5px; }
.wsx-tbl th, .wsx-tbl td { padding: 5px 7px; border: 1px solid #E6E8EC; text-align: left; white-space: nowrap; }
.wsx-tbl th { font-weight: 650; }
.wsx-tbl th:not(:first-child), .wsx-tbl td:not(:first-child) { text-align: right; }
.wsx-box { margin-top: 10px; padding: 7px 9px; border-radius: 7px; font-size: 9px; }
.wsx-box strong { display: block; margin-top: 2px; font-size: 10.5px; font-weight: 650; }
.wsx-box--g { background: #E5F9E7; color: #2BAA4A; } .wsx-box--b { background: #DFF0FF; color: #3991D5; }
.wsx-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.wsx-ct { margin-top: 8px; text-align: center; font-size: 10px; font-weight: 600; color: #4A4F57; }
.erp .wsx-combo { display: block; width: 100%; height: 160px; margin-top: 2px; }
.wsx-combo text { font-size: 8px; fill: #8A9099; }
.wsx-range { height: 12px; margin: 6px 10px 0 52px; border: 1px solid #C9D3F2; border-radius: 3px; background: linear-gradient(180deg, #EEF2FC, #E1E8FA); }
.wsx-gwrap { display: grid; justify-items: center; margin-top: 6px; }
.wsx-gwrap b { font-size: 11px; font-weight: 600; color: #3A3F46; }
.wsx-gwrap span { font-size: 8px; color: var(--mute); }
.erp .wsx-gauge { width: 150px; height: 115px; margin-top: 4px; }
.wsx-gauge text { font-size: 6px; fill: #8A9099; }
.wsx-gauge .wsx-gauge__v { font-size: 9.5px; font-weight: 650; fill: #3A3F46; }
.wsx-call { display: flex; align-items: center; justify-content: center; gap: 16px; }
.erp .wsx-call .wsx-donut { margin: 8px 0 0; width: 96px; height: 96px; flex: none; }
.wsx-call > div { display: grid; gap: 3px; font-size: 8px; color: #3A3F46; }
.wsx-call span::before { content: ""; display: inline-block; width: 12px; height: 1px; margin-right: 5px; vertical-align: middle; background: #B8BDC5; }
.wsx-axis { display: flex; justify-content: space-between; margin-top: -10px; padding: 0 10px; font-size: 7.5px; color: var(--mute); }
.wsx-wide .wsx-vbars { height: 96px; }

/* ---------- Vídeo de lançamento (logo abaixo do hero) ---------- */
.launch { padding-bottom: clamp(16px, 2vw, 32px); }
.launch__frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: #F3F3F3; box-shadow: 0 24px 64px rgba(25,25,26,.12); isolation: isolate; }
.launch__video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Entrada: a moldura cresce e sobe; o vídeo "assenta" por dentro (zoom 1.08 → 1) */
.launch__frame.reveal { opacity: 0; transform: translateY(56px) scale(.9); transition: opacity .9s var(--ease-out), transform 1.3s cubic-bezier(.16, 1, .3, 1); }
.launch__frame.reveal.is-visible { opacity: 1; transform: none; }
.launch__frame .launch__video { transform: scale(1.08); transition: transform 1.8s cubic-bezier(.16, 1, .3, 1); }
.launch__frame.is-visible .launch__video { transform: none; }

/* Botão "ativar o som": centro do vídeo, coral */
.launch__sound {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
  display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 26px 0 22px; white-space: nowrap;
  border: 0; border-radius: var(--radius-pill); cursor: pointer;
  background: var(--coral-action); color: #fff; font: 600 1.0625rem/1 var(--font-sans);
  box-shadow: 0 12px 32px rgba(223,82,65,.35), 0 2px 8px rgba(0,0,0,.12);
  transition: background var(--dur-fast), transform var(--dur-base) var(--ease-out), opacity var(--dur-base);
}
.launch__sound:hover { background: var(--coral-600); transform: translate(-50%, -50%) scale(1.04); }
.launch__sound::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--coral-action); animation: launch-ping 2.2s ease-out infinite; pointer-events: none; }
@keyframes launch-ping { 0% { opacity: .8; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.15, 1.45); } }
.launch__ico { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.launch__ico path:first-child { fill: currentColor; }
.launch__sound[hidden] { display: none; }

/* Controles (depois de ativar o som) */
.launch__controls {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: center; gap: 14px; padding: 40px 20px 16px;
  background: linear-gradient(to top, rgba(25,25,26,.72), rgba(25,25,26,0)); color: #fff;
  transition: opacity var(--dur-base), transform var(--dur-base) var(--ease-out);
}
.launch__controls[hidden] { display: none; }
.launch__frame.is-idle .launch__controls { opacity: 0; transform: translateY(8px); pointer-events: none; }
.launch__frame.is-idle { cursor: none; }
.lc-btn { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: var(--radius-pill); background: transparent; color: inherit; cursor: pointer; transition: background var(--dur-fast); }
.lc-btn:hover { background: rgba(255,255,255,.16); }
.lc-ico { width: 22px; height: 22px; fill: currentColor; }
.lc-ico--stroke { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lc-ico--stroke path:first-child { fill: currentColor; }
.lc-ico--play, .is-paused .lc-ico--pause, .lc-ico--off, .is-muted .lc-ico--on { display: none; }
.is-paused .lc-ico--play, .is-muted .lc-ico--off { display: block; }
/* ícones de traço puro (tela cheia): sem o preenchimento do 1º path usado nos ícones de volume */
.lc-ico--expand path, .lc-ico--compress path { fill: none !important; }
.lc-ico--compress, .is-full .lc-ico--expand { display: none; }
.is-full .lc-ico--compress { display: block; }
/* Em tela cheia a moldura ocupa a tela toda, sem cantos, com o vídeo inteiro sobre fundo preto */
.launch__frame:fullscreen { aspect-ratio: auto; width: 100%; height: 100%; border-radius: 0; box-shadow: none; background: #000; transform: none; }
.launch__frame:-webkit-full-screen { aspect-ratio: auto; width: 100%; height: 100%; border-radius: 0; box-shadow: none; background: #000; transform: none; }
.launch__frame:fullscreen .launch__video { object-fit: contain; }
.launch__frame:-webkit-full-screen .launch__video { object-fit: contain; }
.launch__frame:fullscreen .launch__controls { padding: 64px 32px 24px; }
.lc-time { flex: none; font: 500 .8125rem/1 var(--font-mono); font-variant-numeric: tabular-nums; opacity: .9; }
.lc-vol { flex: none; display: flex; align-items: center; gap: 4px; }
/* Sliders: trilho branco translúcido com preenchimento coral até --p (definido no JS) */
.lc-range { -webkit-appearance: none; appearance: none; height: 20px; margin: 0; background: transparent; cursor: pointer; --p: 0%; }
.lc-seek { flex: 1; min-width: 0; }
.lc-volume { width: 84px; --p: 100%; }
.lc-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--coral-action) var(--p), rgba(255,255,255,.35) var(--p)); }
.lc-range::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255,255,255,.35); }
.lc-range::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--coral-action); }
.lc-range::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 1px 4px rgba(0,0,0,.35); transition: transform var(--dur-fast); }
.lc-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.lc-range:hover::-webkit-slider-thumb { transform: scale(1.2); }
.lc-range:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; }

@media (max-width: 760px) {
  .launch__frame { border-radius: var(--radius-md); }
  .launch__sound { height: 42px; padding: 0 16px 0 14px; font-size: .875rem; gap: 8px; }
  .launch__ico { width: 18px; height: 18px; }
  .launch__controls { gap: 6px; padding: 24px 8px 6px; }
  .lc-btn { width: 34px; height: 34px; }
  .lc-ico { width: 18px; height: 18px; }
  .lc-time { font-size: .6875rem; }
  .lc-volume { display: none; }          /* no celular o volume é o do aparelho; fica só o mudo */
}
@media (prefers-reduced-motion: reduce) {
  .launch__frame.reveal, .launch__frame .launch__video { transform: none; transition: opacity .3s; }
  .launch__sound::before { animation: none; }
}