/* =====================================================================
   CENTRAL DE SUPERMERCADO 2026 — central-2026.css
   EXTENSÃO da gramática Fispal. Regras:
   1. Só usa tokens de theme.css (--blue, --gold, --ink...). Zero token novo de cor.
   2. Só usa pesos que existem nos woff2: 300/400/500/600/700/800.
   3. Não sobrescreve .slide, .kicker, .display-*, .folio nem body.
   4. Toda animação tem fallback reduced-motion + print.
   Substitui central-engineering.css (removido: tokens --ce-*, malha blueprint,
   trilho global, hero rebaixado, 41 pesos inexistentes).
   ===================================================================== */

/* ---------- SLIDE NAVY (extraído do inline da Fispal, agora reutilizável) ---------- */
.slide--navy{background:linear-gradient(135deg,#121317 0%,#1a2f4a 100%);color:#fff}
.slide--navy .display-lg,.slide--navy .display-xl,.slide--navy .display-hero{color:#fff}
.slide--navy .kicker{color:var(--gold)}
.slide--navy .lede{color:rgba(255,255,255,.78)}
.slide--navy .folio{color:#fff;opacity:.07}
.slide--navy .caption{color:rgba(255,255,255,.55)}

/* ---------- ESCALA QUE FALTAVA NA FISPAL ---------- */
.display-md{font-family:var(--f-display);font-weight:700;font-size:44px;line-height:1.1;letter-spacing:-.018em;color:var(--ink);margin:0}
.slide--navy .display-md{color:#fff}

/* ---------- STAGGER ESTENDIDO (.g-rise d4/d5 faltavam) ---------- */
@media (prefers-reduced-motion: no-preference){
  .reveal section.present .g-rise.d4{animation-delay:.48s}
  .reveal section.present .g-rise.d5{animation-delay:.60s}
  .reveal section.present .g-rise.d6{animation-delay:.72s}
}

/* ---------- CARD DE ENGENHARIA (a linguagem "sala de engenharia" que o Antonio pediu) ---------- */
.ecard{position:relative;background:var(--paper);border:1px solid var(--border);border-radius:10px;padding:26px 28px;display:flex;flex-direction:column;justify-content:center;gap:12px;min-height:0;max-height:360px;align-self:center}
/* cartões com foto/estúdio dentro (padding:0, a foto preenche) continuam esticando por inteiro */
.ecard[style*="padding:0;overflow:hidden"]{max-height:none;align-self:stretch}
.ecard--accent{border-top:4px solid var(--blue)}
.ecard--gold{border-top:4px solid var(--gold)}
.ecard__k{font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep)}
.ecard__t{font-family:var(--f-sans);font-weight:700;font-size:22px;line-height:1.15;color:var(--ink)}
.ecard__d{font-family:var(--f-sans);font-size:16px;line-height:1.5;color:var(--ink-soft);flex:0 0 auto}
.ecard__f{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);border-top:1px solid var(--border);padding-top:11px;margin-top:4px;flex:0 0 auto}
.slide--navy .ecard{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.13)}
.slide--navy .ecard__t{color:#fff}
.slide--navy .ecard__d{color:rgba(255,255,255,.76)}
.slide--navy .ecard__f{color:rgba(255,255,255,.45);border-top-color:rgba(255,255,255,.12)}

/* ---------- CARD COM DIAGRAMA (bloco fixo, conteúdo centrado como grupo) ---------- */
.ecard--diagram{justify-content:center;gap:16px;max-height:none;align-self:stretch}
.ecard--diagram>svg{flex:0 0 auto;width:100%;height:250px;margin:14px 0}
.ecard--diagram .ecard__d{flex:0 0 auto}
.ecard--diagram .ecard__f{margin-top:8px;flex:0 0 auto}

/* ---------- MÉTRICA (número grande com unidade) ---------- */
.metric{display:flex;align-items:baseline;gap:12px}
.metric__n{font-family:var(--f-display);font-weight:800;font-size:76px;line-height:.9;letter-spacing:-.035em;color:var(--blue)}
.metric__u{font-family:var(--f-sans);font-weight:700;font-size:26px;color:var(--ink-soft)}
.metric--gold .metric__n{color:var(--gold-deep)}
.metric--wine .metric__n{color:var(--wine)}
.slide--navy .metric__n{color:#fff}
.slide--navy .metric__u{color:rgba(255,255,255,.7)}

/* ---------- TRILHO DE PROCESSO (setas horizontais entre etapas) ---------- */
.track{display:grid;align-items:stretch;gap:0;min-height:0}
.track__step{position:relative;padding:22px 26px;background:var(--paper);border:1px solid var(--border);display:flex;flex-direction:column;gap:8px}
.track__step:first-child{border-radius:10px 0 0 10px}
.track__step:last-child{border-radius:0 10px 10px 0}
.track__step+.track__step{border-left:none}
.track__step::after{content:"";position:absolute;right:-11px;top:50%;width:20px;height:20px;margin-top:-10px;background:var(--paper);border-top:1px solid var(--border);border-right:1px solid var(--border);transform:rotate(45deg);z-index:2}
.track__step:last-child::after{display:none}
.track__n{font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;color:var(--blue)}
.track__t{font-family:var(--f-sans);font-weight:700;font-size:19px;color:var(--ink);line-height:1.15}
.track__d{font-family:var(--f-sans);font-size:14px;line-height:1.45;color:var(--ink-faint)}
.track__step--hero{background:var(--blue-tint);border-color:var(--blue)}
.track__step--hero::after{background:var(--blue-tint);border-color:var(--blue)}
.track__step--hero .track__t{color:var(--blue)}

/* ---------- MOLDURA DE FOTO COM LEGENDA TÉCNICA ---------- */
.pframe{position:relative;border-radius:8px;overflow:hidden;background:#0F1C2E;min-height:0}
.pframe img,.pframe video{width:100%;height:100%;object-fit:cover;display:block}
.pframe__tag{position:absolute;left:12px;bottom:11px;font-family:var(--f-mono);font-size:12px;letter-spacing:.05em;color:#fff;background:rgba(18,19,23,.82);padding:5px 12px;border-radius:20px;z-index:2;white-space:nowrap}
.pframe__tag--blue{background:rgba(0,85,165,.9)}
.pframe__tag--top{bottom:auto;top:46px}
.pframe__cap{position:absolute;left:12px;top:11px;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);background:rgba(230,236,242,.94);padding:4px 11px;border-radius:20px;z-index:2}

/* ---------- SELO DE EMBALAGEM REAL (prova de mercado sobre a foto de corte) ---------- */
.pframe__pkg{position:absolute;right:12px;bottom:12px;width:92px;height:92px;background:#fff;border-radius:10px;border:2px solid #fff;box-shadow:0 6px 18px rgba(15,28,46,.4);padding:7px;z-index:3;display:flex;align-items:center;justify-content:center}
.pframe__pkg img{width:100%;height:100%;object-fit:contain}
.pframe__pkg--lg{width:132px;height:132px;padding:9px;border-radius:12px}

/* ---------- MOLDURA COM FOTO EM FORMATO INTEIRO (sem cortar, fundo claro) ---------- */
.pframe--contain{background:var(--paper);box-sizing:border-box;padding:16px}
.pframe--contain img{object-fit:contain}

/* ---------- PRODUTO EM ESTÚDIO (recorte sobre fundo neutro) ---------- */
.studio{display:flex;align-items:center;justify-content:center;border-radius:8px;background:radial-gradient(120% 95% at 50% 18%,#fff 0%,#eef2f7 70%,#dfe6ef 100%);padding:20px;min-height:0}
.studio img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 18px 24px rgba(15,28,46,.2))}

/* ---------- NOTA DE FONTE (rodapé de slide) ---------- */
.srcnote{font-family:var(--f-mono);font-size:12px;line-height:1.5;color:var(--ink-faint);margin-top:14px}
.slide--navy .srcnote{color:rgba(255,255,255,.42)}

/* ---------- SELO DE RESSALVA TÉCNICA ---------- */
.caveat{display:inline-flex;align-items:center;gap:9px;font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;color:var(--gold-deep);background:rgba(169,179,191,.12);border:1px solid rgba(169,179,191,.4);padding:7px 14px;border-radius:20px}
.slide--navy .caveat{color:var(--gold);background:rgba(169,179,191,.16);border-color:rgba(169,179,191,.45)}

/* ---------- DESENHO DE LINHA (SVG que se desenha ao entrar) ---------- */
@media (prefers-reduced-motion: no-preference){
  .reveal section .draw{stroke-dasharray:2000;stroke-dashoffset:2000}
  .reveal section.present .draw{animation:cDraw 1.2s cubic-bezier(.22,.61,.36,1) forwards}
  .reveal section.present .draw.w1{animation-delay:.25s}
  .reveal section.present .draw.w2{animation-delay:.55s}
  .reveal section.present .draw.w3{animation-delay:.85s}
  .reveal section.present .draw.w4{animation-delay:1.15s}
  @keyframes cDraw{to{stroke-dashoffset:0}}

  .reveal section .pop{opacity:0;transform:scale(.9)}
  .reveal section.present .pop{animation:cPop .5s cubic-bezier(.22,1.4,.4,1) forwards}
  .reveal section.present .pop.w1{animation-delay:.5s}
  .reveal section.present .pop.w2{animation-delay:.8s}
  .reveal section.present .pop.w3{animation-delay:1.1s}
  .reveal section.present .pop.w4{animation-delay:1.4s}
  .reveal section.present .pop.w5{animation-delay:1.7s}
  @keyframes cPop{to{opacity:1;transform:scale(1)}}

  /* barra que cresce da esquerda (régua de magnitude) */
  .reveal section .grow{transform-box:fill-box;transform-origin:left center;transform:scaleX(0)}
  .reveal section.present .grow{animation:cGrow 1.1s cubic-bezier(.16,.84,.28,1) forwards}
  .reveal section.present .grow.w1{animation-delay:.3s}
  .reveal section.present .grow.w2{animation-delay:.75s}
  @keyframes cGrow{to{transform:scaleX(1)}}
}
@media (prefers-reduced-motion: reduce){
  .draw{stroke-dashoffset:0!important;animation:none!important}
  .pop{opacity:1!important;transform:none!important;animation:none!important}
  .grow{transform:none!important;animation:none!important}
}
@media print{
  .draw{stroke-dashoffset:0!important;animation:none!important}
  .pop{opacity:1!important;transform:none!important;animation:none!important}
  .grow{transform:none!important;animation:none!important}
}

/* ---------- VOCABULÁRIO DE MOTION POR TIPO DE CONTEÚDO ----------
   número de impacto = pop elástico · foto = revelação por zoom-out · diagrama = draw/pop (acima) · texto/lista = g-rise (slides.css)
   Cada tipo de conteúdo entra de um jeito diferente para a animação CONTAR A HISTÓRIA, não só decorar. */
@media (prefers-reduced-motion: no-preference){
  .reveal section .metric{opacity:0;transform:scale(.72)}
  .reveal section.present .metric{animation:mPop .65s .15s cubic-bezier(.34,1.56,.64,1) forwards}
  @keyframes mPop{60%{opacity:1;transform:scale(1.07)}100%{opacity:1;transform:scale(1)}}

  .reveal section .pframe img,.reveal section .studio img{transform:scale(1.08)}
  .reveal section.present .pframe img,.reveal section.present .studio img{animation:imgReveal 1.3s cubic-bezier(.22,.61,.36,1) forwards}
  @keyframes imgReveal{to{transform:scale(1)}}
}
@media (prefers-reduced-motion: reduce){
  .metric{opacity:1!important;transform:none!important;animation:none!important}
  .pframe img,.studio img{transform:none!important;animation:none!important}
}
@media print{
  .metric{opacity:1!important;transform:none!important;animation:none!important}
  .pframe img,.studio img{transform:none!important;animation:none!important}
}


/* ===== PALCO DE VÍDEO por equipamento (2026-08-24) =====
   Overlay .fragment sobre o diagrama (.proc__svg): seta → revela e o deck.js
   dá play; seta ← volta ao desenho. Reutilizável nos slides T 255 / F 100.
   No PDF o overlay some e o diagrama fica. */
.proc__svg{position:relative}
.proc-video{position:absolute;inset:0;display:flex;align-items:stretch;gap:38px;background:var(--bg-warm);border:1px solid var(--border);border-radius:6px;overflow:hidden;z-index:3}
.proc-video video{height:100%;width:auto;max-width:64%;display:block;background:#000;flex:0 0 auto}
.proc-video__info{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:13px;padding:0 46px 0 6px}
.proc-video__k{font-family:var(--f-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep)}
.proc-video__t{font-family:var(--f-display);font-weight:700;font-size:33px;line-height:1.12;color:var(--ink)}
.proc-video__d{font-family:var(--f-sans);font-size:17px;line-height:1.5;color:var(--ink-soft);max-width:640px}
.proc-video__m{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;color:var(--ink-faint)}
.proc-video .motion-toggle{position:absolute;right:26px;bottom:20px;font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;padding:8px 16px;border:1px solid var(--border-strong);border-radius:20px;background:var(--paper);color:var(--ink-soft);cursor:pointer}
.proc-video .motion-toggle:hover{border-color:var(--blue);color:var(--blue)}
@media print{.proc-video{display:none}}

@media print{.pkg3d-stage{display:none}}