/* ==========================================================================
   Consistem ERP 8.1 — Subpáginas (Dados, Produtividade)
   Depende de ds.css e landing.css. Reaproveita tokens e componentes da home.
   ========================================================================== */

/* ---------- Hero das subpáginas (bloco grafite centralizado) ---------- */
.page-hero { padding-block: clamp(72px, 7vw, 112px); }
/* Respiro entre a navbar e o bloco grafite (o header sticky já deixa 12px; total ≈ 28px no desktop, 20px no mobile) */
main > .page-hero:first-child { margin-top: clamp(8px, 1.2vw, 16px); }
.page-hero__inner { display: grid; justify-items: center; text-align: center; gap: var(--space-5); }
.page-hero__icon { width: 84px; height: 84px; margin-bottom: var(--space-2); }
.page-hero__title { font-size: clamp(2.5rem, 1.6rem + 3vw, 4rem); line-height: 1.125; letter-spacing: -0.02em; font-weight: 400; max-width: 14em; text-wrap: balance; }
.page-hero__tag {
  display: inline-flex; align-items: center; min-height: 40px; padding: 6px 16px;
  border: 1px solid rgba(255,255,255,.28); border-radius: var(--radius-sm);
  font-size: 1.125rem; font-weight: 500; color: #fff; font-variation-settings: "opsz" 14;
}
.page-hero__tag::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 2px; background: var(--coral-action); margin-right: 10px; }
.page-hero__text { font-size: var(--fs-lead); line-height: 1.5; color: rgba(255,255,255,.78); max-width: 36em; }

/* ---------- Utilitários de texto ---------- */
.prose { display: grid; gap: var(--space-3); color: var(--grafite-300); font-size: var(--fs-lead); line-height: 1.5; max-width: 36em; }
.prose--wide { max-width: 56em; }
.head--center { justify-items: center; text-align: center; }
.head--center .t-h2 { max-width: none; }
.head--center .lead-muted { max-width: 40em; }
.head .prose { margin-top: var(--space-1); }
.block-gap { margin-top: 64px; }
.list-intro { margin-top: 48px; font-size: 1.25rem; font-weight: 500; color: var(--grafite-800); font-variation-settings: "opsz" 14; }

/* ---------- Texto + mídia ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(40px, 7vw, 112px); align-items: center; }
.split--wide-media { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.split__content { display: grid; gap: var(--space-8); justify-items: start; }
.media-soft { border-radius: var(--radius-lg); overflow: hidden; background: var(--branco-500); border: 1px solid var(--color-border); }
.media-soft img, .media-soft video { display: block; width: 100%; height: auto; }
.media-wide { margin-top: 48px; }
.media-soft video { aspect-ratio: var(--ar, 16 / 9); object-fit: cover; }
@media (max-width: 960px) {
  .split, .split--wide-media { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Comparativo (BI externo × Workspace) ---------- */
.compare__intro { margin: 48px 0 24px; text-align: center; font-size: 1.25rem; font-weight: 500; color: var(--grafite-800); font-variation-settings: "opsz" 14; }
.compare { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); grid-template-rows: auto repeat(5, auto); column-gap: var(--space-4); row-gap: var(--space-2); }
/* As duas colunas e as setas compartilham as mesmas linhas (subgrid): uma seta por item, sempre alinhada */
.compare__col { grid-row: 1 / span 6; display: grid; grid-template-rows: subgrid; border-radius: var(--radius-md); padding: var(--space-6); background: var(--branco-500); }
.compare__col--featured { background: var(--grafite-800); color: #fff; box-shadow: var(--shadow-lg); }
.compare__title { font-size: 1.25rem; font-weight: 600; text-align: center; padding-bottom: var(--space-4); margin-bottom: var(--space-2); border-bottom: 1px solid var(--color-border); }
.compare__col--featured .compare__title { border-bottom-color: rgba(255,255,255,.14); }
.compare__list { display: contents; list-style: none; margin: 0; padding: 0; }
.compare__list li { display: flex; align-items: center; gap: var(--space-3); min-height: 52px; padding: 12px 16px; border-radius: 12px; background: #fff; color: var(--grafite-500); font-size: .9375rem; }
.compare__col--featured .compare__list li { background: rgba(255,255,255,.06); color: #fff; }
.compare__list svg { width: 20px; height: 20px; flex: none; color: var(--grafite-300); }
.compare__col--featured .compare__list svg { color: var(--coral-action); }
.compare__mid { grid-row: 1 / span 6; grid-column: 2; display: grid; grid-template-rows: subgrid; padding-block: var(--space-6); }
.compare__mid i { display: grid; place-items: center; color: var(--coral-action); }
.compare__mid svg { width: 24px; height: 24px; }
@media (max-width: 860px) {
  .compare { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: var(--space-4); }
  .compare__col { grid-row: auto; grid-template-rows: none; gap: var(--space-2); }
  .compare__list { display: grid; gap: var(--space-2); }
  .compare__mid { display: none; }
}

/* ---------- Dois itens com ilustração (segurança) ---------- */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); margin-top: 64px; }
.duo__item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); padding: var(--space-10) var(--space-8); border-radius: var(--radius-md); background: var(--branco-500); }
.duo__item img { width: 120px; height: 120px; margin-bottom: var(--space-2); }
.duo__title { font-size: 1.25rem; font-weight: 600; }
.duo__item p { color: var(--grafite-300); max-width: 30em; }
@media (max-width: 760px) { .duo { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Grade de painéis ---------- */
#paineis .head-row .t-h2 { max-width: 13em; }
#paineis .head-row > p { max-width: 30em; }
#paineis .head-row { align-items: flex-start; }
.panels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin-top: 64px; }
.panel-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6); border-radius: var(--radius-md); background: #fff; border: 1px solid var(--color-border); }
.panel-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.panel-card__top img { width: 40px; height: 40px; }
.panel-card__status { font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; padding: 4px 8px; border-radius: 6px; white-space: nowrap; }
.panel-card__status--ok { background: #E8F5EE; color: #1F7A4D; }
.panel-card__status--soon { background: var(--branco-500); color: var(--grafite-300); }
.panel-card__title { font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
.panel-card__text { font-size: .9375rem; line-height: 1.5; color: var(--grafite-300); }
@media (max-width: 1100px) { .panels { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .panels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .panels { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Lista de recursos com ícone ---------- */
.icon-list { display: grid; gap: var(--space-8) var(--space-10); margin-top: 48px; }
.icon-list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.icon-item { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.icon-item img { width: 40px; height: 40px; }
.icon-item h3 { font-size: 1.0625rem; font-weight: 600; line-height: 1.3; margin-bottom: 6px; }
.icon-item p { font-size: .9375rem; line-height: 1.5; color: var(--grafite-300); }
@media (max-width: 960px) { .icon-list--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .icon-list--3 { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); } }

/* ---------- Cards de recurso (Acesso rápido) ---------- */
.feature-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-6); }
.f-card { display: grid; gap: var(--space-3); align-content: start; padding: var(--space-8); border-radius: var(--radius-md); background: var(--branco-500); }
.f-card img { width: 40px; height: 40px; margin-bottom: var(--space-2); }
.f-card h3 { font-size: 1.125rem; font-weight: 600; }
.f-card p { font-size: .9375rem; line-height: 1.5; color: var(--grafite-300); }
@media (max-width: 860px) { .feature-cards { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Antes × depois (Nova Interface) ---------- */
.ba__hint { margin-top: 64px; text-align: center; font-family: var(--font-mono); font-size: 12px; letter-spacing: .05em; color: var(--grafite-300); }
.ba { --pos: 50%; position: relative; margin-top: var(--space-4); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); background: var(--branco-500); user-select: none; touch-action: pan-y; }
.ba__img { display: block; width: 100%; height: auto; pointer-events: none; }
.ba__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba__before .ba__img { height: 100%; object-fit: cover; }
.ba__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.08); pointer-events: none; }
.ba__handle span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; gap: 2px; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--coral-action); color: #fff; box-shadow: var(--shadow-md); }
.ba__handle svg { width: 16px; height: 16px; }
.ba__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.ba__range:focus-visible + * , .ba:focus-within .ba__handle span { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- Depoimento (Fakini) ---------- */
.testimonial { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; margin-top: 96px; }
.testimonial__media img { width: 100%; height: auto; display: block; }
.testimonial__content { display: grid; gap: var(--space-8); justify-items: start; }
.testimonial__content .t-h2 { max-width: 13em; }
@media (max-width: 960px) { .testimonial { grid-template-columns: minmax(0, 1fr); margin-top: 64px; } .testimonial__media { max-width: 560px; } }

/* ---------- Grid inteligente (bloco grafite) ---------- */
.grid-block__icon { width: 56px; height: 56px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.08); color: #fff; }
.grid-block__icon svg { width: 28px; height: 28px; }
.grid-block__text { font-size: var(--fs-lead); line-height: 1.5; color: rgba(255,255,255,.78); max-width: 30em; }
.carousel--full .carousel__track { gap: var(--space-4); }
.carousel--full .carousel__slide { flex: 0 0 100%; }
.carousel--full .media { border-radius: var(--radius-md); background: var(--grafite-900); }
.carousel--full .media img { width: 100%; height: auto; }
.carousel--full .carousel__controls { margin-top: var(--space-5); }
.icon-btn--dark { background: transparent; border-color: rgba(255,255,255,.28); color: #fff; }
.icon-btn--dark:hover { background: var(--coral-action); border-color: var(--coral-action); }
.section--dark .carousel__dot { background: rgba(255,255,255,.3); }
.section--dark .carousel__dot[aria-current="true"] { background: var(--coral-action); }

/* ---------- Hover (sucinto, como na home) ---------- */
.panel-card, .f-card, .duo__item, .compare__col { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base), border-color var(--dur-base); }
@media (hover: hover) {
  .panel-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--coral-200); }
  .f-card:hover, .duo__item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
}

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  .page-hero { padding: 40px 32px; }
  .page-hero__tag { font-size: .9375rem; padding: 6px 12px; text-align: left; }
  .page-hero__text, .prose, .grid-block__text { font-size: 16px; }
  .list-intro, .compare__intro { font-size: 1.0625rem; }
  .block-gap { margin-top: 40px; }
  .ba__hint { margin-top: 40px; }
  .ba { border-radius: var(--radius-md); }
  .ba__handle span { width: 40px; height: 40px; }
  .media-soft { border-radius: var(--radius-md); }
  .duo__item { padding: var(--space-8) var(--space-6); }
  .grid-block .carousel__arrows { display: none; }
  .grid-block .carousel__controls { justify-content: center; }
}

/* ==========================================================================
   Telas recriadas em HTML (mesma linguagem do Kanban e dos painéis da home)
   ========================================================================== */
.mock-fit { width: 100%; }
.mock-fit__inner { font-size: 12px; color: var(--grafite-800); }
.mk-win { background: #fff; border-radius: var(--radius-md); border: 1px solid var(--color-border); box-shadow: var(--shadow-lg); overflow: hidden; }
.mk-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--coral-500); color: #fff; font-weight: 600; font-size: 12px; }
.mk-bar__dots { display: flex; gap: 6px; } .mk-bar__dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.55); }
.mk-toolbar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--color-border); }
.mk-select { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); font-weight: 500; }
.mk-select svg { width: 12px; height: 12px; }
.mk-search { flex: 1; height: 30px; border-radius: 8px; background: var(--branco-500); display: flex; align-items: center; padding: 0 12px; color: var(--grafite-200); }
.mk-body { padding: 16px; }
.mk-paineis { background: var(--branco-300); display: grid; gap: 12px; padding: 18px 20px 22px; }
.mk-group { font-size: 15px; font-weight: 700; padding-bottom: 8px; border-bottom: 1px solid var(--color-border); }
.mk-pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 6px; }
.mk-pcard { background: #fff; border: 1px solid var(--color-border); border-radius: 12px; padding: 14px; display: grid; gap: 6px; box-shadow: var(--shadow-sm); }
.mk-pcard strong { font-size: 13px; margin-top: 6px; }
.mk-pcard > span:last-child { color: var(--grafite-300); font-size: 11px; line-height: 1.45; }
.mk-pcard__icon { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; }
.mk-pcard__icon img { width: 36px; height: 36px; }

/* Notas */
.mk-notas { display: grid; grid-template-columns: 360px 1fr; gap: 14px; align-items: start; }
.mk-notas__side { display: grid; gap: 14px; }
.mk-wtop { display: flex; justify-content: flex-end; padding: 10px 12px; border-bottom: 1px solid var(--color-border); }
.mk-wtop__btns { display: flex; gap: 8px; }
.mk-wtop__btns i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; background: var(--branco-500); color: var(--grafite-500); }
.mk-wtop__btns i.on { background: var(--coral-action); color: #fff; box-shadow: 0 0 0 4px var(--coral-50); }
.mk-wtop__btns svg { width: 13px; height: 13px; }
.mk-tag { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 8px; background: var(--coral-500); color: #fff; font-weight: 600; }
.mk-tag svg { width: 13px; height: 13px; }
.mk-tag--sm { justify-content: space-between; font-size: 11.5px; }
.mk-acc { margin-top: 14px; border: 1px solid var(--color-border); border-radius: 10px; overflow: hidden; }
.mk-acc div { display: flex; align-items: center; gap: 8px; padding: 11px 12px; color: var(--grafite-500); font-weight: 500; }
.mk-acc div + div { border-top: 1px solid var(--color-border); }
.mk-acc svg { width: 11px; height: 11px; transform: rotate(-90deg); color: var(--grafite-200); }
.mk-acc b { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--color-border); display: grid; place-items: center; color: var(--grafite-300); font-weight: 500; }
.mk-input { margin-top: 12px; height: 34px; border-radius: 8px; border: 1.5px solid var(--coral-300); display: flex; align-items: center; padding: 0 10px; }
.mk-input .caret { width: 1px; height: 14px; background: var(--grafite-800); margin-left: 1px; animation: mk-blink 1.1s steps(1) infinite; }
@keyframes mk-blink { 50% { opacity: 0; } }
.mk-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.mk-btn { display: inline-flex; align-items: center; height: 30px; padding: 0 16px; border-radius: 8px; background: var(--grafite-800); color: #fff; font-weight: 600; }
.mk-btn--ghost { background: var(--branco-500); color: var(--grafite-500); }
.mk-editor { min-height: 100%; }
.mk-etools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 10px 14px; border-bottom: 1px solid var(--color-border); background: var(--branco-300); }
.mk-etools i { min-width: 24px; height: 24px; padding: 0 4px; border-radius: 5px; display: grid; place-items: center; font-style: normal; color: var(--grafite-500); }
.mk-etools i .on, .mk-etools i b.on { color: var(--coral-600); }
.mk-eselect { height: 24px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--color-border); background: #fff; display: inline-flex; align-items: center; margin-left: 6px; }
.mk-eselect.on { color: var(--coral-600); border-color: var(--coral-200); }
.mk-doc { padding: 18px 22px 24px; display: grid; gap: 6px; line-height: 1.5; }
.mk-doc h4 { font-size: 17px; font-weight: 700; margin-top: 8px; }
.mk-doc h4:first-child { margin-top: 0; }
.mk-doc p { color: var(--grafite-500); }
.mk-doc ul { margin: 2px 0 4px; padding-left: 20px; color: var(--grafite-500); display: grid; gap: 3px; }

/* Grid */
.mk-gwin { background: var(--branco-300); }
.mk-gwrap { --fx: 371px; position: relative; margin: 14px; border: 1px solid var(--color-border); border-radius: 10px; background: #fff; overflow: hidden; height: 300px; }
.mk-grid { width: 100%; border-collapse: collapse; font-size: 13px; }
.mk-grid th { text-align: left; font-weight: 600; padding: 10px 12px; border-bottom: 2px solid var(--branco-700); white-space: nowrap; }
.mk-grid th svg { display: inline-block; width: 10px; height: 10px; margin-left: 6px; vertical-align: 0; color: var(--grafite-200); }
.mk-grid th.sorted { color: var(--coral-600); }
.mk-grid td { padding: 10px 12px; border-bottom: 1px solid var(--branco-500); white-space: nowrap; color: var(--grafite-500); }
.mk-grid .num { text-align: right; }
.mk-grid td.link { color: #2B7BC0; }
.mk-grid tr.sel td { background: var(--coral-50); color: var(--grafite-800); }
.mk-grid .fx { background: var(--branco-300); }
.mk-grid tr.sel .fx { background: #F9E4E1; }
.mk-grid .fx-last { box-shadow: inset -2px 0 0 var(--coral-action), 6px 0 10px -6px rgba(0,0,0,.18); }
.mk-fixline { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--coral-action); box-shadow: 4px 0 10px rgba(0,0,0,.08); }
.mk-gfoot { display: flex; align-items: center; gap: 6px; margin: 0 14px; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 10px; background: #fff; color: var(--grafite-300); }
.mk-pager { display: inline-flex; align-items: center; gap: 6px; margin-right: 10px; padding-right: 12px; border-right: 1px solid var(--color-border); }
.mk-pager b { min-width: 46px; height: 24px; display: grid; place-items: center; border: 1px solid var(--color-border); border-radius: 6px 0 0 6px; color: var(--grafite-800); }
.mk-pager em { font-style: normal; height: 24px; padding: 0 10px; display: grid; place-items: center; background: var(--grafite-500); color: #fff; border-radius: 0 6px 6px 0; margin-left: -6px; }
.mk-gfoot i { position: relative; width: 28px; height: 26px; border-radius: 6px; display: grid; place-items: center; }
.mk-gfoot i svg { width: 14px; height: 14px; }
.mk-gfoot i.on { background: var(--grafite-800); color: #fff; }
.mk-gfoot i.dot::after { content: ""; position: absolute; top: 2px; right: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--coral-action); }
.mk-gbtns { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 14px; }
.mk-gbtns span { height: 32px; border-radius: 8px; background: var(--grafite-800); color: #fff; display: flex; align-items: center; justify-content: center; white-space: nowrap; font-weight: 600; font-size: 12px; }
.mk-pop { position: absolute; background: #fff; border-radius: 12px; box-shadow: var(--shadow-lg); border: 1px solid var(--color-border); overflow: hidden; }
.mk-pop__head { display: flex; justify-content: space-between; padding: 10px 14px; background: var(--grafite-800); color: #fff; font-weight: 600; }
.mk-pop--export { left: 290px; top: 150px; width: 300px; }
.mk-pop__list { display: grid; padding: 8px; }
.mk-pop__list span { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; font-size: 13px; color: var(--grafite-500); }
.mk-pop__list span:first-child { background: var(--coral-50); color: var(--coral-700); }
.mk-pop__list svg { width: 15px; height: 15px; }
.mk-pop--filter { left: 230px; top: 46px; width: 420px; }
.mk-pop__body { padding: 12px 14px 14px; display: grid; gap: 10px; }
.mk-sortbar { display: flex; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid var(--color-border); }
.mk-sortbar i { width: 28px; height: 26px; border-radius: 6px; display: grid; place-items: center; font-style: normal; background: var(--branco-500); color: var(--grafite-500); }
.mk-sortbar span { display: flex; gap: 4px; } .mk-sortbar i.on { background: var(--grafite-800); color: #fff; }
.mk-ops { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mk-op { display: flex; height: 32px; border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden; }
.mk-op b { width: 36px; display: grid; place-items: center; background: var(--branco-500); color: var(--grafite-500); font-size: 11px; }
.mk-op span { display: flex; align-items: center; padding: 0 10px; color: var(--grafite-200); font-size: 11.5px; }
.mk-op.on { border-color: var(--coral-300); } .mk-op.on span { color: var(--grafite-800); }
.mk-check { display: flex; align-items: center; gap: 8px; padding-top: 4px; font-size: 13px; }
.mk-check i { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--grafite-100); }
.mk-on-dark .mk-win { box-shadow: 0 24px 56px rgba(0,0,0,.35); border-color: transparent; }

/* Moldura neutra que sobra para vídeos e imagens reais */
.media-soft { box-shadow: var(--shadow-md); }

/* ==========================================================================
   Refino visual das subpáginas
   ========================================================================== */
/* Hero com tela do produto saindo do bloco grafite */
.page-hero:has(.page-hero__shot) { padding-bottom: 0; overflow: visible; display: flow-root; }
.section--dark > .page-hero__shot, .page-hero__shot { margin-top: clamp(40px, 5vw, 64px); max-width: calc(980px + var(--gutter) * 2); margin-bottom: clamp(-160px, -12vw, -80px); position: relative; z-index: 2; }
.page-hero__shot + * { }
.hero-dash { color: var(--grafite-800); text-align: left; }
/* O card cinza abraça a tela (largura = tela reduzida + padding) */
.hero-dash { display: flex; justify-content: center; }
.hero-dash .dash { flex: 0 1 auto; max-width: 100%; }
.hero-dash .dash { border-radius: var(--radius-lg); box-shadow: 0 32px 80px rgba(0,0,0,.28); }
.page-hero:has(.page-hero__shot) + .section { padding-top: calc(var(--section-y) + clamp(80px, 12vw, 160px)); }
.page-hero.section--dark { overflow: visible; }

/* Faixa clara para alternar o ritmo das seções */
.section--soft { background: var(--branco-500); width: calc(100% - 16px); max-width: 1600px; margin-inline: auto; border-radius: var(--radius-lg); }
.section--soft .duo__item, .section--soft .f-card { background: #fff; box-shadow: var(--shadow-sm); }
.section--soft + .section { padding-top: var(--section-y); }

/* Filtro de status dos painéis */
.panel-filter { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: 48px; }
.panel-filter__btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: #fff; font: 500 .9375rem/1 var(--font-sans); color: var(--grafite-500); cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast); }
.panel-filter__btn b { font-family: var(--font-mono); font-weight: 400; font-size: 12px; padding: 2px 6px; border-radius: 5px; background: var(--branco-500); color: var(--grafite-300); }
.panel-filter__btn:hover { border-color: var(--grafite-200); color: var(--grafite-800); }
.panel-filter__btn.is-on { background: var(--grafite-800); border-color: var(--grafite-800); color: #fff; }
.panel-filter__btn.is-on b { background: rgba(255,255,255,.14); color: #fff; }
.panel-filter + .panels { margin-top: var(--space-6); }
.panel-card[hidden] { display: none !important; }

/* Submenu fixo da página */
/* Barra do header termina em 12 + 66 = 78px (compacta: 8 + 52 = 60px). O submenu gruda 8px abaixo dela. */
.subnav { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 86px); z-index: 40; display: flex; justify-content: center; margin-top: 24px; padding: 0 16px; pointer-events: none; transition: top var(--dur-base) var(--ease-out); }
.subnav__track { pointer-events: auto; display: flex; gap: 4px; padding: 6px; border-radius: 14px; background: rgba(255,255,255,.86); border: 1px solid var(--color-border); box-shadow: var(--shadow-md); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.subnav__track::-webkit-scrollbar { display: none; }
.subnav a { flex: none; padding: 8px 14px; border-radius: 9px; font-size: .875rem; font-weight: 500; text-decoration: none; color: var(--grafite-500); white-space: nowrap; transition: background var(--dur-fast), color var(--dur-fast); }
.subnav a:hover { background: var(--branco-500); color: var(--grafite-800); }
.subnav a.is-active { background: var(--grafite-800); color: #fff; }
.site-header.is-compact ~ main .subnav { top: calc(env(safe-area-inset-top, 0px) + 68px); }
[id] { scroll-margin-top: 150px; }

/* Teclas */
kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 2.2em; height: 1.9em; padding: 0 .55em; margin: 0 .1em; border-radius: 8px; background: #fff; border: 1px solid var(--grafite-100); border-bottom-width: 3px; font: 600 .85em/1 var(--font-mono); color: var(--grafite-800); vertical-align: .05em; }

@media (max-width: 760px) {
  .page-hero__shot { margin-bottom: -56px; }
  .page-hero:has(.page-hero__shot) + .section { padding-top: calc(64px + 56px); }
  .hero-dash .dash { border-radius: 12px; padding: 8px; }
  .section--soft { width: calc(100% - 16px); }
  .subnav, .site-header.is-compact ~ main .subnav { top: calc(env(safe-area-inset-top, 0px) + 82px); margin-top: 16px; justify-content: flex-start; }
  .subnav__track { width: 100%; }
  .panel-filter__btn { flex: 1 1 auto; justify-content: center; }
}

/* ==========================================================================
   Novidades
   ========================================================================== */
.nv-hero .page-hero__inner { gap: var(--space-6); }
.nv-hero__logo .logo { height: clamp(36px, 4vw, 52px); width: auto; color: #fff; }
.nv-hero__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.nv-hero__chips li { padding: 6px 14px; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,.28); font-weight: 500; font-variation-settings: "opsz" 14; }
.nv-hero__chips li::first-letter { color: var(--coral-action); }
.nv-hero__title { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem); line-height: 1.25; letter-spacing: -0.02em; max-width: 18em; text-wrap: balance; }
.nv-hero__down { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.28); color: #fff; transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-base) var(--ease-out); }
.nv-hero__down svg { width: 20px; height: 20px; }
.nv-hero__down:hover { background: var(--coral-action); border-color: var(--coral-action); transform: translateY(3px); }

.nv__grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: start; }
/* Painel de filtros: sticky, nunca mais alto que a tela; rola por dentro se precisar */
.nv__filters {
  position: sticky; top: 110px; display: grid; gap: var(--space-6); align-content: start; min-width: 0;
  max-height: calc(100vh - 130px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--grafite-100) transparent;
  padding: 2px 6px 24px 2px; margin: -2px -6px 0 -2px;
}
.nv__filters.has-more { -webkit-mask-image: linear-gradient(#000 calc(100% - 56px), transparent); mask-image: linear-gradient(#000 calc(100% - 56px), transparent); }
.nv__filters-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; }
.nv__filters-label { font-size: .9375rem; font-weight: 600; }
.nv-clear { border: 0; background: none; padding: 4px 0; font: 500 .8125rem/1 var(--font-sans); color: var(--coral-600); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.nv-clear:hover { color: var(--coral-700); }
.nv-filter { min-width: 0; }
.nv-filter__title { font-family: var(--font-mono); font-weight: 400; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--grafite-300); margin-bottom: var(--space-3); display: flex; align-items: center; gap: 8px; }
.nv-filter__title::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--coral-action); }
.nv-filter__opts { display: flex; flex-wrap: wrap; gap: 6px; }
.nv-opt {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--color-border); background: #fff; font: 400 .8125rem/1 var(--font-sans); color: var(--grafite-500);
  cursor: pointer; white-space: nowrap; transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), opacity var(--dur-fast);
}
.nv-opt b { font-family: var(--font-mono); font-weight: 400; font-size: 11px; color: var(--grafite-200); }
.nv-opt:hover { border-color: var(--grafite-200); color: var(--grafite-800); }
.nv-opt.is-on { background: var(--grafite-800); border-color: var(--grafite-800); color: #fff; font-weight: 500; }
.nv-opt.is-on b { color: rgba(255,255,255,.6); }
.nv-opt.is-empty { opacity: .45; }
.nv__count { font-size: .9375rem; color: var(--grafite-300); margin-bottom: var(--space-4); }
.nv__count b { color: var(--grafite-800); font-weight: 600; }
.nv__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.nv-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); border-radius: var(--radius-md); background: var(--branco-500); border: 1px solid transparent; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base), background var(--dur-base), border-color var(--dur-base); }
.nv-card__path { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 12px; color: var(--grafite-300); }
.nv-card__path svg { width: 11px; height: 11px; transform: rotate(-90deg); }
.nv-card__area { color: var(--coral-600); font-weight: 500; }
.nv-card__title { font-size: 1.1875rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.nv-card__text { font-size: .9375rem; line-height: 1.5; color: var(--grafite-500); flex: 1; }
.nv-card__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-2); }
.nv-badge { font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; padding: 4px 8px; border-radius: 6px; background: #fff; border: 1px solid var(--color-border); color: var(--grafite-500); }
.nv-badge--soon { background: var(--grafite-800); border-color: var(--grafite-800); color: #fff; }
@media (hover: hover) { .nv-card:hover { transform: translateY(-4px); background: #fff; border-color: var(--color-border); box-shadow: var(--shadow-md); } }
.nv__empty { padding: 48px; text-align: center; border-radius: var(--radius-md); background: var(--branco-500); color: var(--grafite-300); }
.nv__pager { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: var(--space-10); }
.nv-page { width: 40px; height: 40px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: #fff; font: 500 .9375rem/1 var(--font-sans); color: var(--grafite-500); cursor: pointer; }
.nv-page:hover { border-color: var(--grafite-200); color: var(--grafite-800); }
.nv-page.is-on { background: var(--coral-action); border-color: var(--coral-action); color: #fff; }
@media (max-width: 1100px) { .nv__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .nv__grid { grid-template-columns: minmax(0, 1fr); }
  .nv__filters { position: static; gap: var(--space-5); max-height: none; overflow: visible; padding: 0; margin: 0; -webkit-mask-image: none; mask-image: none; }
  .nv-filter__opts { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .nv-filter__opts::-webkit-scrollbar { display: none; }
  .nv-opt { flex: none; }
}
@media (max-width: 600px) { .nv__cards { grid-template-columns: minmax(0, 1fr); } }

/* Respiro entre blocos com fundo próprio (faixa clara × grafite) */
.section--soft + .section--dark, .section--dark + .section--soft, .section--soft + .section--soft, .section--dark + .section--dark { margin-top: var(--space-4); }

/* ==========================================================================
   Animação de entrada da tela do Workspace no hero (só página Dados)
   ========================================================================== */
.hero-dash .dash { animation: hd-in .8s var(--ease-out) .15s both; }
@keyframes hd-in { from { opacity: 0; transform: translateY(40px) scale(.98); } to { opacity: 1; transform: none; } }
.hero-dash .kpi, .hero-dash .panel, .hero-dash .dash__top { animation: hd-up .6s var(--ease-out) both; }
/* Painel novo (Workspace recriado): cards entram em sequência, barras crescem */
.hero-dash .erp-card { animation: hd-up .6s var(--ease-out) calc(.35s + var(--i, 0) * .07s) both; }
.hero-dash .wsx-hb b { transform-origin: left center; animation: hd-fill .9s cubic-bezier(.22, 1, .36, 1) 1.1s both; }
.hero-dash .wsx-vb i { transform-origin: 50% 100%; animation: hd-grow .8s cubic-bezier(.22, 1, .36, 1) 1.2s both; }
.hero-dash .dash__top { animation-delay: .35s; }
.hero-dash .kpi:nth-child(1) { animation-delay: .5s; }
.hero-dash .kpi:nth-child(2) { animation-delay: .6s; }
.hero-dash .kpi:nth-child(3) { animation-delay: .7s; }
.hero-dash .kpi:nth-child(4) { animation-delay: .8s; }
.hero-dash .panel { animation-delay: .9s; }
.hero-dash .panel + .panel { animation-delay: 1s; }
/* Barras do gráfico crescem de baixo para cima, uma após a outra */
.hero-dash .panel svg rect { transform-box: fill-box; transform-origin: 50% 100%; animation: hd-grow .7s cubic-bezier(.22, 1, .36, 1) both; }
.hero-dash .panel svg rect:nth-of-type(1) { animation-delay: 1.10s; } .hero-dash .panel svg rect:nth-of-type(2) { animation-delay: 1.15s; }
.hero-dash .panel svg rect:nth-of-type(3) { animation-delay: 1.20s; } .hero-dash .panel svg rect:nth-of-type(4) { animation-delay: 1.25s; }
.hero-dash .panel svg rect:nth-of-type(5) { animation-delay: 1.30s; } .hero-dash .panel svg rect:nth-of-type(6) { animation-delay: 1.35s; }
.hero-dash .panel svg rect:nth-of-type(7) { animation-delay: 1.40s; } .hero-dash .panel svg rect:nth-of-type(8) { animation-delay: 1.45s; }
.hero-dash .panel svg rect:nth-of-type(9) { animation-delay: 1.50s; } .hero-dash .panel svg rect:nth-of-type(10) { animation-delay: 1.55s; }
.hero-dash .panel svg rect:nth-of-type(11) { animation-delay: 1.60s; } .hero-dash .panel svg rect:nth-of-type(12) { animation-delay: 1.65s; }
/* Linha do planejado é revelada da esquerda para a direita */
.hero-dash .panel svg polyline { animation: hd-draw 1.2s cubic-bezier(.22, 1, .36, 1) 1.5s both; }
/* Barras por linha se preenchem */
.hero-dash .hbar__track i { transform-origin: left center; animation: hd-fill .9s cubic-bezier(.22, 1, .36, 1) both; }
.hero-dash .hbar__row:nth-child(1) .hbar__track i { animation-delay: 1.3s; }
.hero-dash .hbar__row:nth-child(2) .hbar__track i { animation-delay: 1.4s; }
.hero-dash .hbar__row:nth-child(3) .hbar__track i { animation-delay: 1.5s; }
.hero-dash .hbar__row:nth-child(4) .hbar__track i { animation-delay: 1.6s; }
.hero-dash .hbar__row:nth-child(5) .hbar__track i { animation-delay: 1.7s; }
@keyframes hd-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes hd-grow { from { transform: scaleY(0); } to { transform: none; } }
@keyframes hd-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes hd-fill { from { transform: scaleX(0); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .hero-dash .dash, .hero-dash *, .hero-dash .panel svg rect, .hero-dash .panel svg polyline { animation: none !important; }
}

/* Recursos do Grid inteligente dentro do bloco grafite */
.grid-feats { list-style: none; margin: 64px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.grid-feat { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-4); align-items: start; padding: var(--space-6); border-radius: var(--radius-md); background: #fff; color: var(--grafite-800); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base); }
.grid-feat img { width: 40px; height: 40px; }
.grid-feat h3 { font-size: 1.0625rem; font-weight: 600; line-height: 1.3; margin-bottom: 6px; }
.grid-feat p { font-size: .9375rem; line-height: 1.5; color: var(--grafite-300); }
@media (hover: hover) { .grid-feat:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(0,0,0,.28); } }
@media (max-width: 960px) { .grid-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .grid-feats { grid-template-columns: minmax(0, 1fr); margin-top: 40px; } }

/* ==========================================================================
   Páginas Versão 8.1 e Indústria 4.0
   ========================================================================== */
/* Hero em duas colunas (texto + visual) */
.page-hero--split .page-hero__split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(40px, 6vw, 96px); }
.page-hero__content { display: grid; gap: var(--space-8); justify-items: start; }
.page-hero--split .page-hero__title { max-width: 13em; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.v81-hero__mark { display: grid; place-items: center; }
.v81-hero__mark .logotema { width: min(100%, 340px); }
.v81-hero .logotema__eight, .v81-hero .logotema__one { fill: #fff; }
.v81-hero .logotema__halo { fill-opacity: .12; }
.i4-hero__media { position: relative; }
.i4-hero__media .media { aspect-ratio: 1461 / 998; background: var(--grafite-900); }
.i4-hero__media .speed-bar { z-index: 2; }
.i4-hero__media .speed-bar--1 { left: -5%; top: 12%; width: 28%; height: 8px; }
.i4-hero__media .speed-bar--2 { right: -4%; bottom: 14%; width: 30%; height: 10px; }
@media (max-width: 960px) {
  .page-hero--split .page-hero__split { grid-template-columns: minmax(0, 1fr); }
  .v81-hero__mark { order: -1; justify-content: start; }
  .v81-hero__mark .logotema { width: 180px; }
}

/* Cabeçalho de seção: título à esquerda, texto à direita */
.v-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6) clamp(40px, 7vw, 96px); align-items: start; }
.v-head__title { display: grid; gap: var(--space-4); justify-items: start; }
.v-head__title .t-h2 { max-width: 14em; }
.v-head .prose { max-width: 34em; }
@media (max-width: 860px) { .v-head { grid-template-columns: minmax(0, 1fr); } }
.split--rev > :first-child { order: 2; }
@media (min-width: 961px) { .split--rev.split--wide-media { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } }
@media (max-width: 960px) { .split--rev > :first-child { order: 0; } }
.prose--inverse { color: rgba(255,255,255,.78); }
.v-tight { padding-top: 0; }
.v-stage { margin-top: 48px; padding: clamp(12px, 2.4vw, 32px); border-radius: var(--radius-lg); background: var(--branco-500); }
.section--soft .v-stage { background: #fff; }
.v-stage--pad { margin-top: 0; }

/* Demo interativa (Supademo) */
/* A tela da demo tem 1920×949; o iframe ganha uma folga transparente em cima e embaixo (padding com content-box,
   como no embed oficial do Supademo) para os balões dos passos não serem cortados quando saem da tela. */
.demo-embed { --demo-pad: 64px; position: relative; box-sizing: content-box; padding-block: var(--demo-pad); margin-top: -16px; aspect-ratio: 1920 / 949; background: transparent; }
.demo-embed__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.demo-embed__hint { margin-top: -40px; text-align: center; font-family: var(--font-mono); font-size: 12px; letter-spacing: .05em; color: var(--grafite-300); }
.demo-embed__fallback { position: absolute; inset: var(--demo-pad) 0; border-radius: var(--radius-lg); background: var(--grafite-800); display: grid; place-items: center; align-content: center; gap: var(--space-4); padding: var(--space-6); text-align: center; color: #fff; }
.demo-embed__fallback p { color: rgba(255,255,255,.72); max-width: 28em; }
@media (max-width: 760px) { .demo-embed { --demo-pad: 40px; aspect-ratio: 4 / 3; margin-top: -8px; } .demo-embed__fallback { border-radius: var(--radius-md); } .demo-embed__hint { margin-top: -24px; } }

/* "O que muda" (MRP II) */
.changes { margin-top: 48px; display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.changes__title { font-size: 1.25rem; font-weight: 600; padding-top: 10px; }
.changes__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.changes__list li { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); border: 1px solid var(--color-border); font-size: .9375rem; line-height: 1.45; color: var(--grafite-500); }
.changes__list svg { flex: none; width: 20px; height: 20px; color: var(--coral-action); margin-top: 1px; }
@media (max-width: 1024px) { .changes { grid-template-columns: minmax(0, 1fr); } .changes__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .changes__list { grid-template-columns: minmax(0, 1fr); } }

/* MRP II — composição genérica: janela de Gantt + cartões soltos e sobrepostos (src/mocks_paginas.py · mrp) */
.gt { position: relative; width: 900px; height: 460px; margin-inline: auto; }
.gt__main { position: absolute; left: 150px; top: 36px; width: 560px; height: 370px; display: flex; flex-direction: column; overflow: hidden;
  background: rgba(255,255,255,.94); border: 1px solid var(--color-border); border-radius: 16px; box-shadow: var(--shadow-lg); }
.gt__top { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--color-border); }
.gt__dots { display: flex; gap: 5px; } .gt__dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--coral-200); }
.gt__sk { width: var(--w); height: 8px; border-radius: 4px; background: var(--branco-700); }
.gt__chip { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--color-border); font-size: 11px; font-weight: 500; color: var(--grafite-500); }
.gt__chip svg { width: 12px; height: 12px; }
.gt__body { flex: 1; display: grid; grid-template-columns: 110px minmax(0, 1fr); }
.gt__rows { display: grid; grid-template-rows: repeat(8, 1fr); align-items: center; padding: 34px 14px 10px; border-right: 1px solid var(--color-border); }
.gt__rows span { width: var(--w); height: 7px; border-radius: 4px; background: var(--grafite-100); }
.gt__chart { position: relative; }
.gt__cols { position: absolute; inset: 0 14px; display: grid; grid-template-columns: repeat(16, 1fr); }
.gt__cols i:nth-child(4n+1) { border-left: 1px solid var(--branco-700); }
.gt__cols i:nth-child(8n+5), .gt__cols i:nth-child(8n+6), .gt__cols i:nth-child(8n+7), .gt__cols i:nth-child(8n+8) { background: var(--branco-300); }
.gt__ticks { position: absolute; top: 14px; left: 14px; right: 14px; display: grid; grid-template-columns: repeat(16, 1fr); }
.gt__ticks i::after { content: ""; display: block; width: 4px; height: 4px; margin: auto; border-radius: 50%; background: var(--grafite-100); }
.gt__bar { --u: calc((100% - 28px) / 16); --rh: calc((100% - 44px) / 8);
  position: absolute; height: 14px; border-radius: 7px; transform-origin: left center;
  top: calc(34px + var(--rh) * var(--r) + (var(--rh) - 14px) / 2); left: calc(14px + var(--u) * var(--s) + 2px); width: calc(var(--u) * var(--d) - 4px); }
.gt__bar--c { background: var(--coral-action); } .gt__bar--y { background: var(--amarelo-500); }
.gt__bar--g { background: var(--grafite-800); } .gt__bar--s { background: var(--coral-200); }
.gt__now { position: absolute; top: 20px; bottom: 10px; left: calc(14px + (100% - 28px) / 16 * 9.5); border-left: 1.5px dashed var(--coral-action); }
.gt__now::before { content: ""; position: absolute; top: -6px; left: -6.75px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--coral-action); box-sizing: border-box; }
.gt__card { position: absolute; background: #fff; border: 1px solid var(--color-border); border-radius: 14px; box-shadow: 0 18px 40px rgba(25,25,26,.14); }
.gt__list { left: 40px; top: 96px; width: 190px; display: flex; gap: 12px; padding: 16px; background: var(--grafite-800); border-color: transparent; color: var(--coral-300); }
.gt__list > svg { width: 20px; height: 20px; flex: none; }
.gt__list div { flex: 1; display: grid; gap: 10px; padding-top: 2px; }
.gt__list span { width: var(--w); height: 7px; border-radius: 4px; background: rgba(255,255,255,.22); }
.gt__list span:first-child { background: rgba(255,255,255,.5); }
.gt__cal { right: 40px; top: 0; width: 190px; overflow: hidden; }
.gt__cal-top { position: relative; height: 34px; background: var(--coral-action); }
.gt__cal-top i { position: absolute; top: -4px; width: 6px; height: 14px; border-radius: 3px; background: #fff; box-shadow: 0 0 0 2px var(--coral-action); }
.gt__cal-top i:first-child { left: 44px; } .gt__cal-top i:last-child { right: 44px; }
.gt__cal-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; padding: 14px; }
.gt__cal-grid i { aspect-ratio: 1; border-radius: 4px; background: var(--branco-500); }
.gt__cal-grid i.on { background: var(--coral-action); } .gt__cal-grid i.on2 { background: var(--amarelo-500); }
.gt__clock { position: absolute; right: 18px; top: 116px; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 3px solid var(--branco-500); box-shadow: 0 12px 28px rgba(25,25,26,.16); color: var(--grafite-800); }
.gt__clock svg { width: 32px; height: 32px; }
.gt__note { right: 70px; bottom: 28px; width: 230px; display: flex; gap: 12px; padding: 14px; }
.gt__note-ico { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--coral-50); color: var(--coral-600); }
.gt__note-ico svg { width: 18px; height: 18px; }
.gt__note div { flex: 1; display: grid; gap: 7px; align-content: start; }
.gt__note b { font-size: 12.5px; font-weight: 600; }
.gt__note span { width: var(--w); height: 6px; border-radius: 3px; background: var(--branco-700); }
.gt__cap { left: 80px; bottom: 14px; width: 170px; padding: 14px; }
.gt__cap b { font-size: 12px; font-weight: 600; }
.gt__cap-bars { display: flex; align-items: flex-end; gap: 6px; height: 54px; margin-top: 10px; }
.gt__cap-bars i { flex: 1; height: var(--h); border-radius: 4px; background: var(--grafite-100); }
.gt__cap-bars i.over { background: var(--coral-action); }
/* Movimento: barras crescem ao aparecer; cartões flutuam devagar, fora de fase */
.gt__bar { animation: gt-grow .7s var(--ease-out) calc(.2s + var(--n) * 60ms) both; }
.reveal:not(.is-visible) .gt__bar { animation-play-state: paused; }
.gt__card, .gt__clock { animation: gt-float 7s ease-in-out infinite; }
.gt__cal { animation-delay: -2s; } .gt__clock { animation-delay: -3.5s; } .gt__note { animation-delay: -5s; } .gt__cap { animation-delay: -1s; }
@keyframes gt-grow { from { transform: scaleX(0); } }
@keyframes gt-float { 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .gt__bar, .gt__card, .gt__clock { animation: none; } }

/* Inventário — cards "Na prática" */
.inv { display: grid; gap: var(--space-3); }
.inv__label { font-family: var(--font-mono); font-weight: 400; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--grafite-300); display: flex; align-items: center; gap: 8px; }
.inv__label::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--coral-action); }
.inv-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 220px); align-items: center; gap: var(--space-6); padding: var(--space-6); border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-sm); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base); }
.inv-card h4 { font-size: 1.125rem; font-weight: 600; margin-bottom: 4px; }
.inv-card p { font-size: .9375rem; color: var(--grafite-300); }
@media (hover: hover) { .inv-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } }
.inv-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 10px; background: var(--branco-500); }
.inv-seg span { height: 34px; display: grid; place-items: center; border-radius: 7px; font-weight: 600; font-size: .875rem; color: var(--grafite-200); }
.inv-seg span.on { background: var(--grafite-800); color: #fff; }
.inv-prog { display: grid; gap: 6px; font-size: 12px; }
.inv-prog__top, .inv-prog__foot { display: flex; justify-content: space-between; gap: 8px; color: var(--grafite-300); }
.inv-prog__top b { color: var(--grafite-800); }
.inv-prog__bar { height: 8px; border-radius: 8px; background: var(--branco-500); overflow: hidden; }
.inv-prog__bar i { display: block; height: 100%; border-radius: 8px; background: var(--coral-action); transform-origin: left; animation: hd-fill 1.4s var(--ease-out) both; }
.inv-prog__foot .warn { color: var(--coral-600); font-weight: 600; }
.inv-scan { display: grid; gap: 8px; justify-items: center; font-size: 12px; color: var(--grafite-300); }
.inv-scan > span { display: inline-flex; align-items: center; gap: 6px; }
.inv-scan svg { width: 14px; height: 14px; }
.inv-scan__code { position: relative; display: flex; gap: 2px; height: 38px; padding: 0 10px; align-items: stretch; }
.inv-scan__code i { width: 2px; background: var(--grafite-800); }
.inv-scan__code i:nth-child(3n) { width: 4px; } .inv-scan__code i:nth-child(5n) { width: 1px; }
.inv-scan__laser { position: absolute; left: 0; right: 0; height: 2px; background: var(--coral-action); box-shadow: 0 0 8px var(--coral-action); animation: scan 2.2s ease-in-out infinite alternate; }
@keyframes scan { from { top: 4px; } to { top: calc(100% - 6px); } }
@media (max-width: 560px) { .inv-card { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); } }

/* XML → cenário de entrada (sobre grafite) */
.xc { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); align-items: center; gap: var(--space-3); }
.xc__card { border-radius: var(--radius-md); background: #fff; color: var(--grafite-800); overflow: hidden; box-shadow: 0 24px 56px rgba(0,0,0,.3); font-size: 12px; }
.xc__card--xml { background: var(--grafite-900); color: #fff; border: 1px solid rgba(255,255,255,.1); }
.xc__head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; font-weight: 600; border-bottom: 1px solid var(--color-border); }
.xc__card--xml .xc__head { border-color: rgba(255,255,255,.1); }
.xc__head svg { width: 16px; height: 16px; color: var(--coral-action); }
.xc__code { margin: 0; padding: 12px 0; font: 11px/1.7 var(--font-mono); white-space: pre; overflow: hidden; color: rgba(255,255,255,.6); }
.xc__code span { display: block; padding: 0 14px; }
.xc__code .hl { color: #fff; background: rgba(223,82,65,.22); box-shadow: inset 2px 0 0 var(--coral-action); }
.xc__arrow { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--coral-action); color: #fff; }
.xc__arrow svg { width: 18px; height: 18px; animation: xc-nudge 1.8s ease-in-out infinite; }
@keyframes xc-nudge { 50% { transform: translateX(3px); } }
.xc__fields { list-style: none; margin: 0; padding: 6px 14px; }
.xc__fields li { display: grid; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--branco-500); }
.xc__fields span { color: var(--grafite-300); font-size: 11px; }
.xc__foot { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #E8F5EE; color: #1F7A4D; font-weight: 600; }
.xc__foot svg { width: 15px; height: 15px; }
@media (max-width: 600px) { .xc { grid-template-columns: minmax(0, 1fr); justify-items: stretch; } .xc__arrow { justify-self: center; transform: rotate(90deg); } }

/* Pedido com itens em diferentes momentos */
.pd { border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--color-border); box-shadow: var(--shadow-lg); padding: clamp(16px, 2.4vw, 28px); }
.pd__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); }
.pd__head b { font: 500 1rem/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.pd__head span { font-size: .875rem; color: var(--grafite-300); }
.pd__legend { display: grid; gap: 8px; margin: var(--space-4) 0 var(--space-2); padding: 10px 0 12px; border-radius: 10px; background: var(--branco-300); border: 1px solid var(--color-border); }
.pd__legend-title { display: flex; align-items: center; gap: 10px; padding-inline: 14px; font: 500 10.5px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--grafite-800); }
.pd__legend-title::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--coral-action); }
.pd__legend-title::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }
.pd__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n s" "t t"; align-items: center; gap: 12px var(--space-4); }
.pd__name { grid-area: n; } .pd__st { grid-area: s; } .pd__track { grid-area: t; }
.pd__steps { display: grid; grid-template-columns: repeat(4, 1fr); font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--grafite-300); text-align: center; }
.pd__list { list-style: none; margin: 0; padding: 0; display: grid; }
.pd__row { padding: 14px 0 16px; border-top: 1px solid var(--branco-500); }
.pd__name { font-weight: 600; }
.pd__track { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); justify-items: center; }
.pd__track::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 50%; height: 2px; margin-top: -1px; background: var(--branco-700); }
.pd__track i { position: relative; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--branco-700); }
.pd__track i.on { background: var(--grafite-800); border-color: var(--grafite-800); }
.pd__track i.cur { width: 16px; height: 16px; background: var(--coral-action); border-color: var(--coral-action); box-shadow: 0 0 0 5px var(--coral-50); }
.pd__row--done .pd__track i.cur { background: var(--grafite-800); border-color: var(--grafite-800); box-shadow: 0 0 0 5px var(--grafite-50); }
.pd__st { justify-self: end; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 6px; font: 500 10.5px/1.25 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
.pd__st svg { width: 13px; height: 13px; flex: none; }
.pd__row--prod .pd__st { background: var(--coral-50); color: var(--coral-700); }
.pd__row--lib .pd__st { background: var(--coral-action); color: #fff; }
.pd__row--wait .pd__st { border: 1px solid var(--color-border); color: var(--grafite-300); }
.pd__row--done .pd__st { background: var(--grafite-800); color: #fff; }
@media (max-width: 600px) { .pd__steps { font-size: 8.5px; letter-spacing: .02em; } }

/* Memória de cálculo de descontos */
.ds__list { list-style: none; margin: 0; padding: 8px 16px; }
.ds__list li { display: grid; grid-template-columns: minmax(0, 1fr) 48px 96px; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px dashed var(--branco-700); }
.ds__list li div { display: grid; gap: 2px; } .ds__list li div span { color: var(--grafite-300); font-size: 11px; }
.ds__list em { font-style: normal; font-weight: 600; color: var(--coral-600); text-align: right; }
.ds__list strong { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.ds__total { display: flex; align-items: baseline; gap: 10px; margin: 0 16px; padding: 12px 0 14px; }
.ds__total span { font-weight: 600; } .ds__total strong { margin-left: auto; font-size: 20px; letter-spacing: -0.02em; }
.ds__total em { font-style: normal; color: var(--grafite-300); font-size: 11px; }
.ds__alcada { margin: 0 12px 12px; padding: 14px; border-radius: 10px; background: var(--branco-300); border: 1px solid var(--color-border); display: grid; gap: 8px; }
.ds__alcada-head { display: flex; justify-content: space-between; font-weight: 600; }
.ds__alcada-head b { color: var(--coral-600); }
.ds__scale { position: relative; display: grid; grid-template-columns: 5fr 3fr 4fr; gap: 3px; height: 10px; }
.ds__scale i { border-radius: 3px; } .ds__scale .z1 { background: var(--grafite-100); } .ds__scale .z2 { background: var(--grafite-200); } .ds__scale .z3 { background: var(--coral-200); }
.ds__mark { position: absolute; top: -5px; width: 4px; height: 20px; margin-left: -2px; border-radius: 2px; background: var(--coral-action); box-shadow: 0 0 0 3px #fff; }
.ds__ticks { display: grid; grid-template-columns: 5fr 3fr 4fr; gap: 3px; font-size: 10px; color: var(--grafite-300); }
.ds__flow { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 8px 10px; border-radius: 8px; background: var(--grafite-800); color: #fff; }
.ds__flow svg { width: 14px; height: 14px; }

/* Custos — infográfico ilustrativo estimado → projetado → apurado (src/mocks_paginas.py · custos) */
.cx { display: grid; gap: 16px; padding: 22px; border-radius: 20px; background: #fff; border: 1px solid var(--color-border); box-shadow: var(--shadow-lg); }
.cx__flow { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr); }
.cx__stage { display: flex; flex-direction: column; gap: 3px; padding: 16px; border-radius: 14px; background: var(--branco-500); }
.cx__stage--apu { background: var(--grafite-800); color: #fff; }
.cx__ico { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: #fff; color: var(--grafite-500); margin-bottom: 10px; }
.cx__ico svg { width: 16px; height: 16px; }
.cx__stage--apu .cx__ico { background: var(--coral-action); color: #fff; }
.cx__stage em { font: 400 9.5px/1.3 var(--font-mono); font-style: normal; letter-spacing: .05em; text-transform: uppercase; color: var(--grafite-300); }
.cx__stage--apu em { color: rgba(255,255,255,.6); }
.cx__stage b { font-size: 17px; font-weight: 600; }
.cx__col { height: 120px; margin-top: 14px; display: flex; align-items: flex-end; justify-content: center; border-bottom: 1px solid var(--grafite-100); }
.cx__stage--apu .cx__col { border-bottom-color: rgba(255,255,255,.2); }
.cx__col i { width: 56px; height: var(--h); border-radius: 8px 8px 0 0; background: var(--grafite-100); transform-origin: bottom; }
.cx__stage--pro .cx__col i { background: var(--grafite-300); } .cx__stage--apu .cx__col i { background: var(--coral-action); }
.cx__arrow { display: grid; place-items: center; color: var(--coral-action); }
.cx__arrow svg { width: 16px; height: 16px; }
.cx__delta { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 12px; background: var(--coral-50); color: var(--coral-700); font-size: 12.5px; font-weight: 500; }
.cx__delta svg { width: 16px; height: 16px; flex: none; }
.cx__col i { animation: hd-grow .8s var(--ease-out) calc(.2s + var(--n, 0) * .15s) both; }
.reveal:not(.is-visible) .cx__col i { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .cx__col i { animation: none; } }

/* Evoluções por área */
.v-areas__inner { display: grid; justify-items: center; text-align: center; gap: var(--space-8); max-width: 920px; margin-inline: auto; }
.v-areas .t-h2 { max-width: 16em; }
.v-areas .prose { max-width: 40em; }
.area-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.area-chip { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,.2); color: #fff; text-decoration: none; font-size: .9375rem; transition: background var(--dur-fast), border-color var(--dur-fast); }
.area-chip b { font: 400 11px/1 var(--font-mono); color: rgba(255,255,255,.55); }
.area-chip:hover { background: var(--coral-action); border-color: var(--coral-action); } .area-chip:hover b { color: #fff; }
.v-areas__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }

/* ---------- Indústria 4.0 ---------- */
/* Fluxo máquina → gateway → broker → ERP */
.flow-stage { margin-top: 48px; padding: clamp(20px, 3vw, 40px); border-radius: var(--radius-lg); background: var(--branco-500); }
.flow { display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr) 56px minmax(0, 1fr) 56px minmax(0, 1fr); align-items: center; }
.flow__net { grid-column: 3 / 8; display: grid; grid-template-columns: subgrid; align-items: center; position: relative; padding: 40px 16px 16px; margin: 0 -16px; border: 1.5px dashed var(--grafite-100); border-radius: var(--radius-md); background: rgba(255,255,255,.5); }
.flow__net > .flow__node:first-of-type { grid-column: 1; }
.flow__netlabel { position: absolute; top: 14px; left: 16px; font: 500 11px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--grafite-300); }
.flow__node { display: grid; gap: 4px; align-content: center; min-height: 112px; padding: 18px; border-radius: var(--radius-md); background: #fff; border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); }
.flow__node em { font: 500 11px/1 var(--font-mono); font-style: normal; color: var(--coral-600); }
.flow__node b { font-size: 1.125rem; font-weight: 600; line-height: 1.2; }
.flow__node span { font-size: .875rem; color: var(--grafite-300); }
.flow__node--gw { background: var(--grafite-800); border-color: var(--grafite-800); color: #fff; box-shadow: var(--shadow-md); }
.flow__node--gw span { color: rgba(255,255,255,.7); } .flow__node--gw em { color: var(--coral-300); }
.flow__link { position: relative; display: grid; gap: 14px; padding: 0 6px; }
.flow__fwd, .flow__back { position: relative; display: block; height: 2px; }
.flow__fwd { background: var(--coral-action); }
.flow__fwd::after { content: ""; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left: 7px solid var(--coral-action); border-right: 0; }
.flow__fwd::before { content: ""; position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--coral-action); box-shadow: 0 0 0 3px rgba(223,82,65,.2); animation: flow-dot 2.4s linear infinite; }
.flow__back { background: repeating-linear-gradient(90deg, var(--grafite-300) 0 4px, transparent 4px 8px); background-size: 16px 2px; animation: flow-dash 1.2s linear infinite; }
.flow__back::after { content: ""; position: absolute; left: -1px; top: -4px; border: 5px solid transparent; border-right: 7px solid var(--grafite-300); border-left: 0; }
.flow__net .flow__link:nth-of-type(1) .flow__fwd::before { animation-delay: .8s; }
.flow__net .flow__link:nth-of-type(2) .flow__fwd::before { animation-delay: 1.6s; }
@keyframes flow-dot { from { left: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } to { left: calc(100% - 8px); opacity: 0; } }
@keyframes flow-dash { to { background-position: -16px 0; } }
.flow-desc { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8); }
.flow-desc li { display: grid; gap: var(--space-2); align-content: start; padding-top: var(--space-4); border-top: 2px solid var(--grafite-800); }
.flow-desc em { font: 500 12px/1 var(--font-mono); font-style: normal; color: var(--coral-600); }
.flow-desc h3 { font-size: 1.125rem; font-weight: 600; }
.flow-desc p { font-size: .9375rem; line-height: 1.5; color: var(--grafite-300); }
@media (max-width: 960px) {
  .flow { grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
  .flow__net { grid-column: auto; grid-template-columns: minmax(0, 1fr); margin: 0; }
  .flow__net > .flow__node:first-of-type { grid-column: auto; }
  .flow__node { min-height: 0; }
  .flow__link { height: 48px; width: 2px; justify-self: center; padding: 0; display: block; }
  .flow__fwd, .flow__back { display: none; }
  .flow__link::before { content: ""; position: absolute; inset: 6px 0; background: var(--coral-action); }
  .flow__link::after { content: ""; position: absolute; left: -4px; bottom: 2px; border: 5px solid transparent; border-top: 7px solid var(--coral-action); border-bottom: 0; }
  .flow-desc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) { .flow-desc { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); } }

/* Gateway: recebe ← equipamento → aciona */
.gw { margin-top: 56px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px) minmax(0, .8fr); align-items: center; gap: clamp(24px, 3vw, 48px); }
.gw__col { display: grid; gap: var(--space-3); }
.gw__label { font-family: var(--font-mono); font-weight: 400; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--grafite-300); display: flex; align-items: center; gap: 8px; }
.gw__label::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--coral-action); }
.gw__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.gw-in, .gw-out { position: relative; display: grid; align-items: center; gap: var(--space-3); padding: 14px 16px; border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-sm); }
.gw-in { grid-template-columns: 40px minmax(0, 1fr) auto; }
.gw-out { grid-template-columns: auto 40px minmax(0, 1fr); }
.gw-in h4, .gw-out h4 { font-size: 1rem; font-weight: 600; line-height: 1.3; }
.gw-in p { font-size: .875rem; line-height: 1.45; color: var(--grafite-300); margin-top: 2px; }
.gw-in code, .gw-out code { font: 500 11px/1 var(--font-mono); padding: 4px 6px; border-radius: 5px; background: var(--branco-500); color: var(--grafite-500); }
.gw-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--coral-50); color: var(--coral-600); }
.gw-ico svg { width: 22px; height: 22px; }
.gw-in::after, .gw-out::before { content: ""; position: absolute; top: 50%; width: clamp(24px, 3vw, 48px); height: 2px; background: repeating-linear-gradient(90deg, var(--grafite-100) 0 4px, transparent 4px 8px); }
.gw-in::after { left: 100%; } .gw-out::before { right: 100%; }
.gw-dev { padding: 18px 14px; border-radius: 18px; background: linear-gradient(#fff, var(--branco-300)); border: 1px solid var(--grafite-100); box-shadow: var(--shadow-lg), inset 0 -3px 0 var(--branco-700); }
.gw-dev__term { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.gw-dev__term span { display: grid; justify-items: center; gap: 4px; font: 500 9.5px/1 var(--font-mono); color: var(--grafite-300); }
.gw-dev__term i { width: 100%; height: 14px; border-radius: 3px; background: var(--grafite-500); box-shadow: inset 0 -4px 0 var(--grafite-800); }
.gw-dev__term--out span { grid-template-rows: auto auto; } .gw-dev__term--out span i { order: 2; }
.gw-dev__term span.on i, .gw-dev__term span.blink i, .gw-dev__term span.blink2 i { background: var(--coral-action); box-shadow: inset 0 -4px 0 var(--coral-700), 0 0 8px rgba(223,82,65,.5); }
.gw-dev__term span.blink i, .gw-dev__leds .blink i { animation: led 0.9s steps(1) infinite; }
.gw-dev__term span.blink2 i, .gw-dev__leds .blink2 i { animation: led 1.7s steps(1) .4s infinite; }
@keyframes led { 50% { background: var(--grafite-500); box-shadow: inset 0 -4px 0 var(--grafite-800); } }
.gw-dev__face { margin: 14px 0; padding: 18px 16px; border-radius: 12px; background: var(--grafite-800); color: #fff; display: grid; gap: 14px; }
.gw-dev__brand { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.gw-dev__brand b { font-size: 1rem; font-weight: 600; }
.gw-dev__brand span { font: 400 11px/1 var(--font-mono); color: rgba(255,255,255,.55); }
.gw-dev__leds { display: flex; gap: 14px; font: 500 10px/1 var(--font-mono); color: rgba(255,255,255,.7); }
.gw-dev__leds span { display: inline-flex; align-items: center; gap: 5px; }
.gw-dev__leds i { width: 7px; height: 7px; border-radius: 50%; background: #3DDC84; box-shadow: 0 0 6px #3DDC84; }
.gw-dev__leds .blink i, .gw-dev__leds .blink2 i { background: var(--coral-action); box-shadow: 0 0 6px var(--coral-action); }
.gw-dev__leds .blink i, .gw-dev__leds .blink2 i { animation-name: led-dot; }
@keyframes led-dot { 50% { background: rgba(255,255,255,.15); box-shadow: none; } }
.gw-dev__ports { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.gw-dev__ports span { padding: 6px 8px; border-radius: 6px; background: rgba(255,255,255,.08); font: 400 10.5px/1 var(--font-mono); color: rgba(255,255,255,.8); }
@media (max-width: 1100px) {
  .gw { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .gw__dev { grid-column: 1 / -1; grid-row: 1; justify-self: center; width: min(100%, 360px); }
  .gw-in::after, .gw-out::before { display: none; }
}
@media (max-width: 760px) { .gw { grid-template-columns: minmax(0, 1fr); margin-top: 40px; } }

/* Acordeão de especificações */
.acc { margin-top: 40px; border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-sm); }
.acc summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 20px 24px; cursor: pointer; font-size: 1.125rem; font-weight: 600; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary > span { display: inline-flex; align-items: center; gap: 12px; }
.acc summary > span svg { width: 22px; height: 22px; color: var(--coral-action); }
.acc__chev { width: 20px; height: 20px; color: var(--grafite-300); transition: transform var(--dur-base) var(--ease-out); }
.acc[open] .acc__chev { transform: rotate(180deg); }
.acc summary:hover .acc__chev { color: var(--grafite-800); }
.acc__body { padding: 0 24px 24px; display: grid; gap: var(--space-4); color: var(--grafite-500); }
.specs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.specs li { padding: 14px 16px; border-radius: 12px; background: var(--branco-500); font-size: .9375rem; line-height: 1.4; }
.specs b { font-weight: 600; color: var(--grafite-800); }
@media (max-width: 860px) { .specs { grid-template-columns: minmax(0, 1fr); } .acc summary { padding: 18px 20px; } .acc__body { padding: 0 20px 20px; } }

/* Implantação: passos + celular (passos e telas do celular andam juntos, 4 s cada) */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); width: 100%; }
.steps li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--space-4); align-items: start; padding: 14px 16px; border-radius: var(--radius-md); }
.steps em { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-style: normal; font-weight: 600; background: var(--branco-500); color: var(--grafite-500); }
.steps h3 { font-size: 1.0625rem; font-weight: 600; margin-bottom: 2px; }
.steps p { font-size: .9375rem; line-height: 1.45; color: var(--grafite-300); }
.steps li, .steps em { transition: background var(--dur-base), color var(--dur-base); }
.steps li.is-on { background: var(--branco-500); }
.steps li.is-on em { background: var(--coral-action); color: #fff; }
/* Passos clicáveis + linha coral de progresso no passo ativo (preenchida via JS; ao completar, avança) */
.steps li { position: relative; overflow: hidden; cursor: pointer; }
.steps li:hover:not(.is-on) { background: var(--branco-300); }
.steps li:focus-visible { outline: 2px solid var(--coral-action); outline-offset: 2px; }
.steps__bar { position: absolute; left: 16px; right: 16px; bottom: 0; height: 2px; border-radius: 2px; background: var(--coral-action); transform: scaleX(0); transform-origin: left; pointer-events: none; transition: transform .1s linear; }
.steps li:not(.is-on) .steps__bar { transition: none; }
.ph-stage { gap: var(--space-5); }
.ph-ctrl { display: flex; align-items: center; gap: var(--space-3); }
.ph-ctrl .icon-btn { background: #fff; }
.ph-ctrl .icon-btn:hover { background: var(--coral-action); border-color: var(--coral-action); color: #fff; }
.ph-ctrl__count { min-width: 44px; text-align: center; font: 500 13px/1 var(--font-mono); color: var(--grafite-300); }
.ph-ctrl__count b { color: var(--grafite-800); font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .steps__bar { display: none; } }
.ph-stage { display: grid; place-items: center; padding: clamp(24px, 4vw, 56px); border-radius: var(--radius-lg); background: var(--branco-500); }
.ph { width: 270px; max-width: 100%; aspect-ratio: 9 / 18; padding: 10px; border-radius: 40px; background: var(--grafite-800); box-shadow: var(--shadow-lg); }
.ph__screen { position: relative; height: 100%; border-radius: 31px; background: #fff; overflow: hidden; font-size: 13px; }
.ph__top { display: flex; justify-content: space-between; padding: 12px 22px 0; font-weight: 600; font-size: 12px; }
.ph__top svg { width: 14px; height: 14px; }
.ph__title { display: flex; align-items: center; gap: 8px; margin: 16px 18px 0; padding-bottom: 12px; border-bottom: 1px solid var(--color-border); font-weight: 600; }
.ph__title svg { width: 18px; height: 18px; color: var(--coral-action); }
.ph__stack { position: absolute; inset: 96px 18px 18px; }
.ph__s { position: absolute; inset: 0; display: grid; align-content: start; gap: 8px; opacity: 0; transform: translateY(8px); transition: opacity .45s var(--ease-out), transform .45s var(--ease-out); }
.ph__s.is-on { opacity: 1; transform: none; }
.ph__s > b { font-size: 1.0625rem; text-align: center; } .ph__s > p { color: var(--grafite-300); text-align: center; line-height: 1.4; }
.ph__ico { justify-self: center; width: 64px; height: 64px; margin: 24px 0 8px; border-radius: 50%; display: grid; place-items: center; background: var(--coral-50); color: var(--coral-600); }
.ph__ico svg { width: 30px; height: 30px; } .ph__ico--ok { background: #E8F5EE; color: #1F7A4D; }
.ph__s code { justify-self: center; padding: 6px 10px; border-radius: 6px; background: var(--branco-500); font: 500 11px/1 var(--font-mono); }
.ph__s .ph__lbl { text-align: left; font-size: 11px; color: var(--grafite-300); margin-top: 4px; }
.ph__wifi { list-style: none; margin: 0; padding: 0; border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; }
.ph__wifi li { display: flex; align-items: center; gap: 8px; padding: 11px 12px; font-size: 12px; }
.ph__wifi li + li { border-top: 1px solid var(--color-border); }
.ph__wifi svg { width: 14px; height: 14px; color: var(--grafite-300); }
.ph__wifi li.on { font-weight: 600; } .ph__wifi li.on svg { color: var(--coral-action); }
.ph__wifi em { margin-left: auto; font-style: normal; font-size: 10.5px; color: #1F7A4D; font-weight: 600; }
.ph__safe { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; font-size: 11.5px; }
.ph__safe svg { width: 13px; height: 13px; }
.ph__in { height: 36px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--color-border); display: flex; align-items: center; font-size: 12px; }
.ph__in--on { border-color: var(--coral-300); box-shadow: 0 0 0 3px var(--coral-50); }
.ph__btn { margin-top: 10px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--coral-action); color: #fff; font-weight: 600; }

/* Configuração de portas */
.io__table { width: 100%; border-collapse: collapse; font-size: 13px; }
.io__table th { text-align: left; font-weight: 600; font-size: 11px; color: var(--grafite-300); padding: 10px 16px; background: var(--branco-300); border-bottom: 1px solid var(--color-border); }
.io__table td { padding: 10px 16px; border-bottom: 1px solid var(--branco-500); color: var(--grafite-500); }
.io__table td:last-child { color: var(--grafite-800); font-weight: 500; }
.io__table code { font: 500 12px/1 var(--font-mono); padding: 4px 7px; border-radius: 5px; background: var(--grafite-800); color: #fff; }
.io__table tr:nth-child(n+4) code { background: var(--coral-action); }
.io__table tbody tr:last-child td { border-bottom: 0; }
.io { padding-bottom: 6px; }

/* Monitoramento: grade de máquinas */
.mt-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mt { display: grid; gap: 4px; padding: 10px; border-radius: 8px; border: 1px solid var(--color-border); border-left-width: 3px; }
.mt b { font-size: 12px; } .mt span { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--grafite-300); }
.mt span i { width: 7px; height: 7px; border-radius: 50%; }
.mt em { font-style: normal; font-weight: 600; font-size: 13px; min-height: 1.2em; }
.mt--run { border-left-color: #2DB36B; } .mt--run span i { background: #2DB36B; }
.mt--stop { border-left-color: var(--coral-action); background: var(--coral-50); } .mt--stop span i { background: var(--coral-action); animation: mk-blink 1.2s steps(1) infinite; } .mt--stop em { font-size: 11px; color: var(--coral-700); }
.mt--off { border-left-color: var(--grafite-200); opacity: .7; } .mt--off span i { background: var(--grafite-200); }
.i4-mon .carousel { margin-top: 56px; }

/* Sem perda de dados */
.buf { margin-top: 48px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--space-6); align-items: stretch; }
.buf__stat { position: relative; overflow: hidden; display: grid; align-content: end; gap: var(--space-2); padding: clamp(28px, 4vw, 48px); border-radius: var(--radius-lg); background: var(--grafite-800); color: #fff; min-height: 300px; }
.buf__pre { font: 400 13px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--coral-300); }
.buf__stat strong { font-size: clamp(3.5rem, 2rem + 5vw, 6rem); line-height: .95; font-weight: 500; letter-spacing: -0.04em; }
.buf__stat p { max-width: 22em; color: rgba(255,255,255,.78); font-size: var(--fs-lead); line-height: 1.4; }
.buf__meter { position: absolute; top: clamp(28px, 4vw, 48px); left: clamp(28px, 4vw, 48px); right: clamp(28px, 4vw, 48px); height: 8px; border-radius: 8px; background: rgba(255,255,255,.1); overflow: hidden; }
.buf__meter i { display: block; height: 100%; width: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--coral-action), var(--coral-300)); transform-origin: left; animation: buf-fill 6s var(--ease-out) infinite; }
@keyframes buf-fill { 0% { transform: scaleX(.05); } 70% { transform: scaleX(.86); } 85%, 100% { transform: scaleX(.86); opacity: 0; } }
.buf__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.buf__list li, .sol-item { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-4); align-items: start; padding: var(--space-6); border-radius: var(--radius-md); background: var(--branco-500); }
.buf__list h3, .sol-item h3 { font-size: 1.125rem; font-weight: 600; margin-bottom: 4px; }
.buf__list p, .sol-item p { font-size: .9375rem; line-height: 1.5; color: var(--grafite-300); }
.footnote { margin-top: var(--space-4); font-size: .8125rem; color: var(--grafite-300); }
@media (max-width: 860px) { .buf { grid-template-columns: minmax(0, 1fr); } .buf__stat { min-height: 240px; } }
@media (prefers-reduced-motion: reduce) { .buf__meter i { animation: none; transform: scaleX(.86); } }

/* Segurança */
.sec-chips { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); width: 100%; }
.sec-chips li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; background: #fff; box-shadow: var(--shadow-sm); font-weight: 500; }
.sec-chips svg { width: 20px; height: 20px; flex: none; color: var(--coral-action); }
.net > div { display: grid; justify-items: center; padding: clamp(20px, 3vw, 40px); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-md); }
.net__inet { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--color-border); color: var(--grafite-300); font-weight: 500; }
.net__inet svg { width: 18px; height: 18px; }
.net__cut { position: relative; width: 2px; height: 72px; background: repeating-linear-gradient(var(--grafite-100) 0 4px, transparent 4px 8px); }
.net__cut span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--coral-action); color: #fff; font-weight: 700; font-size: 14px; box-shadow: 0 0 0 6px #fff; }
.net__box { position: relative; width: 100%; padding: 44px clamp(12px, 2vw, 24px) 24px; border-radius: var(--radius-md); border: 1.5px solid var(--grafite-800); background: var(--branco-300); }
.net__box .flow__netlabel { color: var(--grafite-800); }
.net__row { display: flex; align-items: center; }
.net__n { flex: none; display: grid; justify-items: center; gap: 6px; padding: 12px; min-width: 84px; border-radius: 12px; background: #fff; border: 1px solid var(--color-border); font-weight: 600; font-size: .875rem; }
.net__n svg { width: 22px; height: 22px; color: var(--grafite-500); }
.net__n--gw { background: var(--grafite-800); border-color: var(--grafite-800); color: #fff; } .net__n--gw svg { color: #fff; }
.net__ln { flex: 1; min-width: 12px; height: 2px; background: var(--coral-action); position: relative; overflow: hidden; }
.net__ln::after { content: ""; position: absolute; top: -2px; left: 0; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: flow-dot 1.8s linear infinite; }
@media (max-width: 420px) { .net__n { min-width: 0; padding: 10px 8px; font-size: .8125rem; } }

/* Solução Consistem */
.i4-sol__title { max-width: 18em !important; }
.i4-sol { margin-top: 48px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--space-6); align-items: stretch; }
.i4-sol__media { min-height: 320px; }
.i4-sol__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.sol-item { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); align-content: start; }
.sol-item .gw-ico { margin-bottom: var(--space-2); }
@media (hover: hover) { .sol-item, .buf__list li { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base), background var(--dur-base); } .sol-item:hover, .buf__list li:hover { transform: translateY(-3px); background: #fff; box-shadow: var(--shadow-md); } }
@media (max-width: 860px) { .i4-sol { grid-template-columns: minmax(0, 1fr); } .i4-sol__media { aspect-ratio: 4 / 3; min-height: 0; } }
@media (max-width: 520px) { .i4-sol__grid { grid-template-columns: minmax(0, 1fr); } }

/* Piloto (CTA final) */
.i4-cta { padding-top: 0; }
.i4-cta__card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: clamp(32px, 6vw, 96px); align-items: center; padding: clamp(28px, 4vw, 56px); border-radius: var(--radius-lg); background: var(--coral-50); }
.i4-cta__card .cta__content p { color: var(--grafite-500); }
@media (max-width: 860px) { .i4-cta__card { grid-template-columns: minmax(0, 1fr); } }

@media (max-width: 760px) {
  .page-hero--split { padding: 40px 32px; }
  .page-hero--split .page-hero__inner, .page-hero--split .page-hero__content { text-align: left; }
  .page-hero__actions { width: 100%; }
  .v-stage, .flow-stage, .ph-stage { border-radius: var(--radius-md); }
  .changes, .gw, .buf, .i4-sol { margin-top: 32px; }
  .i4-cta__card { padding: 24px; }
  .area-chip { height: 34px; font-size: .875rem; }
}

/* Telas do sistema dentro de blocos grafite (texto grafite sobre a janela branca) */
.section--dark .dash { color: var(--grafite-800); text-align: left; }
/* Monitoramento: o carrossel sangra até as bordas do bloco grafite (sem corte seco no container),
   com fade nas laterais; cards com largura máxima e mesma altura */
.i4-mon .carousel__track {
  --sec: min(calc(var(--vw, 100vw) - 16px), 1600px);
  --bleed: max(var(--gutter), calc((var(--sec) - 1440px) / 2 + var(--gutter)));
  --fade: min(48px, var(--bleed));
  gap: var(--space-4); align-items: stretch;
  margin-inline: calc(50% - var(--sec) / 2);
  padding: 24px var(--bleed) 56px; margin-block: -24px -56px;
  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%);
}
.i4-mon .carousel__track::after { content: ""; flex: 0 0 1px; }
.i4-mon .carousel__slide { flex: 0 0 min(86%, 980px); }
.i4-mon .dash { box-shadow: 0 16px 36px rgba(0,0,0,.26); }
.i4-mon .carousel__controls { position: relative; }
@media (max-width: 760px) {
  .i4-mon .carousel__track { --bleed: 32px; --fade: 20px; }
  .i4-mon .carousel__slide { flex-basis: 92%; }
}
/* Banner de atualização logo depois de um bloco com fundo */
.section--dark + .update, .section--soft + .update { padding-top: var(--section-y); }

/* Indústria 4.0: todo o conteúdo da página travado em 1440px (como nas seções grafite) */
.page-i40 main .container { max-width: 1440px; }

/* ---------- Indústria 4.0 › Demo para clientes (industria-4-0/demo-cliente/) — formulário Movidesk em iframe ---------- */
.dc-form { padding-top: var(--space-6); }
.dc-form__card { max-width: 860px; margin-inline: auto; }
/* altura fixa: o iframe é de outro domínio e não informa a altura do conteúdo.
   Medido no form/11502: ~745px de conteúdo no desktop e ~870–900px em 320–390px de largura. */
.dc-form__frame { display: block; width: 100%; height: 790px; border: 0; }
.dc-form__note { margin-top: var(--space-5); text-align: center; font-size: var(--fs-small); color: var(--grafite-300); }
.dc-form__note a { color: var(--coral-600); }
.dc-form__back { margin-top: var(--space-8); text-align: center; }
.dc-form__back .btn svg { width: 18px; height: 18px; }
@media (max-width: 760px) {
  .dc-form { padding-top: var(--space-4); }
  .dc-form__frame { height: 940px; }
}