/* ==========================================================================
   Home — Observabilidade Operacional Física
   --------------------------------------------------------------------------
   Esta folha é carregada SÓ pela home (index.html), que é fixada no tema
   escuro (data-theme="dark" + data-theme-lock). Por isso ela pode assumir
   fundo escuro e definir aqui os primitivos de profundidade da página.

   Tokens de marca, tipografia e componentes base continuam vindo de
   syntis-tokens.css e site.css. Nada aqui recolore a marca: o azul de ação
   (--color-brand / --color-brand-fill), o verde de status, o âmbar de atenção
   e o vermelho de falha são os tokens oficiais; as rgba() abaixo são apenas
   véus de superfície (branco/preto translúcido) e halos.

   Todos os "mockups" de produto são HTML/CSS puro. A CSP do site é
   `style-src 'self'` (sem 'unsafe-inline'), então NENHUMA largura/altura de
   barra pode vir de atributo style: elas são classes utilitárias (.fill-*,
   .w-*, .h-*) declaradas no fim desta folha.
   ========================================================================== */

:root{
  /* Separação por fio translúcido, não por borda opaca: sobre superfícies
     escuras a borda cinza vira moldura; o fio some e só estrutura. */
  --hairline:rgba(255,255,255,.06);
  --hairline-strong:rgba(255,255,255,.10);
  /* Véus de superfície para os painéis de mockup. */
  --veil-1:rgba(255,255,255,.02);
  --veil-2:rgba(255,255,255,.03);
  --veil-3:rgba(255,255,255,.045);
  /* Ciano de telemetria: usado só em halo e gradiente de dado, nunca em texto
     de conteúdo (a cor de ação continua sendo o azul de marca). */
  --elec:#38BDF8;
}

/* Fios no lugar das bordas de seção. */
section{border-top-color:var(--hairline)}

/* Dado técnico em monoespaçada (Brand Book 01, §12). */
.mono{font-family:var(--font-mono)}

/* Rótulo de seção/produto. O traço à esquerda dá o ar de instrumentação sem
   custar um ícone. */
.eyebrow{
  display:inline-block;
  font-size:var(--fs-eyebrow); font-weight:var(--fw-bold);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--color-brand);
}
.eyebrow::before{
  content:""; display:inline-block; width:22px; height:1px;
  background:currentColor; opacity:.55;
  vertical-align:middle; margin-right:10px;
}

/* Halo radial de fundo. Fica em um <div> aria-hidden porque precisa sangrar
   para fora do contêiner de leitura sem empurrar layout. */
.glow{position:absolute; pointer-events:none; z-index:0}


/* ==========================================================================
   CABEÇALHO
   ========================================================================== */
/* Vidro leve sobre a página escura. Sem backdrop-filter o fundo continua
   sólido (o @supports só sobe a transparência onde o desfoque existe). */
.topbar-glass{
  background:var(--color-surface-raised);
  border-bottom:var(--border-width) solid var(--hairline);
}
@supports (backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px)){
  .topbar-glass{
    background:color-mix(in srgb, var(--color-bg) 72%, transparent);
    -webkit-backdrop-filter:blur(14px) saturate(150%);
    backdrop-filter:blur(14px) saturate(150%);
  }
}


/* ==========================================================================
   HERÓI
   ========================================================================== */
.hero{position:relative; overflow:hidden; padding:clamp(60px,8vw,104px) 0 clamp(56px,8vw,100px)}
.hero .wrap{position:relative; z-index:1}

.glow-hero{
  top:-420px; left:50%; transform:translateX(-50%);
  width:min(1250px,160%); height:900px;
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(56,189,248,.16), rgba(1,62,236,.12) 42%, transparent 72%);
}

.hero-grid{display:grid; gap:clamp(40px,5vw,56px); grid-template-columns:1fr; align-items:center}
@media (min-width:960px){ .hero-grid{grid-template-columns:1.02fr .98fr; gap:clamp(40px,4vw,60px)} }

/* h1 protagonista: corpo maior que a escala padrão, entrelinha curta e
   tracking negativo controlado — Montserrat 800 fecha demais sem isso. */
.hero h1{
  margin:var(--space-5) 0 var(--space-6);
  max-width:19ch;
  font-size:clamp(2.15rem,4.3vw,3.3rem);
  line-height:1.06;
  letter-spacing:-.035em;
}
.hero .lead{max-width:52ch}

.proof{
  display:flex; align-items:center; gap:10px;
  margin-top:var(--space-6);
  font-size:var(--fs-sm); color:var(--color-text-muted);
}
.proof::before{
  content:""; flex-shrink:0; width:6px; height:6px; border-radius:50%;
  background:var(--color-success); box-shadow:0 0 0 3px rgba(74,222,128,.14);
}

/* CTA com halo: o azul de preenchimento é o oficial (#013EEC); o brilho vem
   de sombra difusa, não de troca de cor. */
.btn-glow{box-shadow:0 0 0 1px rgba(96,165,250,.30), 0 14px 36px -14px rgba(1,62,236,.95)}
.btn-glow:hover{box-shadow:0 0 0 1px rgba(96,165,250,.50), 0 18px 44px -14px rgba(1,62,236,1)}

/* Fantasma sobre fundo escuro: o preenchimento sólido some, fica o fio. */
.btn-ghost{background:var(--veil-2); border-color:var(--hairline-strong)}
.btn-ghost:hover{background:var(--veil-3); border-color:var(--color-border-strong)}


/* ==========================================================================
   STATUS: ponto pulsante (usado em todos os mockups)
   O bloco global de prefers-reduced-motion em site.css já neutraliza o pulso.
   ========================================================================== */
.dot{display:inline-block; flex-shrink:0; width:8px; height:8px; border-radius:50%}
.dot-live{background:var(--color-success); animation:pulse-ok 2.4s ease-out infinite}
.dot-down{background:var(--color-danger); animation:pulse-down 1.4s ease-out infinite}
.dot-warn{background:var(--color-warning)}

@keyframes pulse-ok{
  0%{box-shadow:0 0 0 0 rgba(74,222,128,.55)}
  70%{box-shadow:0 0 0 7px rgba(74,222,128,0)}
  100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}
}
@keyframes pulse-down{
  0%,100%{box-shadow:0 0 0 0 rgba(248,113,113,.6); opacity:1}
  50%{box-shadow:0 0 0 6px rgba(248,113,113,0); opacity:.45}
}

/* Selos de estado e de severidade. A cor nunca é o único portador: o rótulo
   escrito ("Offline", "Crítica") diz a mesma coisa (WCAG 1.4.1). */
.st{
  font-style:normal; font-size:.6875rem; font-weight:var(--fw-bold);
  text-transform:uppercase; letter-spacing:.06em;
  padding:2px 7px; border-radius:var(--radius-pill); white-space:nowrap;
}
.st-on{color:var(--color-success); background:rgba(74,222,128,.12)}
.st-off{color:var(--color-danger); background:rgba(248,113,113,.14)}
.st-warn{color:var(--color-warning); background:rgba(251,191,36,.14)}

.sev{
  display:inline-block;
  font-size:.625rem; font-weight:var(--fw-heavy);
  text-transform:uppercase; letter-spacing:.08em;
  padding:3px 7px; border-radius:5px; white-space:nowrap;
  border:var(--border-width) solid transparent;
}
.sev-high{color:#FCA5A5; background:rgba(248,113,113,.15); border-color:rgba(248,113,113,.3)}
.sev-mid{color:#FCD34D; background:rgba(251,191,36,.13); border-color:rgba(251,191,36,.28)}
.sev-low{color:#93C5FD; background:rgba(96,165,250,.13); border-color:rgba(96,165,250,.28)}

/* Barra de progresso decorativa (uptime, SLA). */
.bar{display:block; height:4px; border-radius:var(--radius-pill); background:rgba(255,255,255,.08); overflow:hidden}
.bar-fill{display:block; height:100%; border-radius:var(--radius-pill);
  background:linear-gradient(90deg, var(--color-brand-fill), var(--elec))}
.bar-warn{background:linear-gradient(90deg,#B45309,#FBBF24)}


/* ==========================================================================
   MOCKUP: Command Center (herói)
   ========================================================================== */
.cc,.mock{
  margin:0; overflow:hidden; min-width:0;
  border:var(--border-width) solid var(--hairline-strong);
  border-radius:var(--radius-lg);
  background:linear-gradient(180deg, rgba(30,41,59,.62), rgba(17,24,39,.92));
  box-shadow:0 40px 90px -44px rgba(0,0,0,.95), 0 0 70px -34px rgba(56,189,248,.30);
}
@supports (backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px)){
  .cc,.mock{-webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
}

.cc-bar,.mock-bar{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
  padding:12px var(--space-4);
  border-bottom:var(--border-width) solid var(--hairline);
  background:var(--veil-1);
  font-size:var(--fs-caption); color:var(--color-text-muted);
}
.cc-unit{display:inline-flex; align-items:center; gap:9px; min-width:0; color:var(--color-text); font-weight:var(--fw-medium)}
.cc-mark{flex-shrink:0; width:14px; height:14px; border-radius:4px;
  background:linear-gradient(135deg, var(--elec), var(--color-brand-fill))}
.cc-live{
  display:inline-flex; align-items:center; gap:7px; flex-shrink:0;
  font-size:.6875rem; font-weight:var(--fw-bold);
  text-transform:uppercase; letter-spacing:.1em; color:var(--color-success);
}

.cc-body,.mock-body{display:grid; gap:var(--space-3); padding:var(--space-4)}

.cc-kpis{display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(88px,1fr))}
.kpi{
  display:flex; flex-direction:column; gap:6px; min-width:0;
  padding:12px; border-radius:10px;
  border:var(--border-width) solid var(--hairline); background:var(--veil-2);
}
.kpi-label{font-size:.625rem; text-transform:uppercase; letter-spacing:.08em; color:var(--color-text-muted)}
.kpi-value{margin-top:auto; font-family:var(--font-mono); font-size:1.35rem; font-weight:var(--fw-bold); line-height:1; color:var(--color-text)}
.kpi-value small{font-size:.62em; opacity:.65; margin-left:1px}
.kpi-warn{color:var(--color-warning)}

.cc-cols{display:grid; gap:10px; grid-template-columns:1fr}
@media (min-width:700px){ .cc-cols{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)} }
.cc-panel{
  min-width:0; padding:12px; border-radius:10px;
  border:var(--border-width) solid var(--hairline); background:var(--veil-1);
}
.cc-panel-title{
  margin-bottom:9px;
  font-size:.625rem; font-weight:var(--fw-bold);
  text-transform:uppercase; letter-spacing:.1em; color:var(--color-text-muted);
}

.assets,.feed{list-style:none; margin:0; padding:0; display:grid}
.assets li,.feed li{
  border-bottom:var(--border-width) solid var(--hairline);
  font-size:.8125rem; min-width:0;
}
.assets li:last-child,.feed li:last-child{border-bottom:0}

.assets li{display:flex; align-items:center; gap:9px; padding:7px 0}
.assets .mono{
  flex:1; min-width:0; color:var(--color-text-secondary); font-size:.6875rem; letter-spacing:.02em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.feed li{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:9px; padding:9px 0}
.feed-txt{min-width:0; color:var(--color-text-secondary)}
.feed-time{font-size:.6875rem; color:var(--color-text-muted)}


/* ==========================================================================
   SEÇÃO DE DOR
   Faixa levemente elevada sobre a página, para a página não virar um fundo
   chapado infinito.
   ========================================================================== */
.section-deep{
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 45%),
    var(--color-surface-raised);
}

.card-tech{
  position:relative; overflow:hidden;
  padding:var(--space-6); border-radius:var(--radius-lg);
  border:var(--border-width) solid var(--hairline-strong);
  background:linear-gradient(180deg, var(--veil-3), var(--veil-1));
  transition:border-color var(--duration-fast) var(--ease-standard);
}
.card-tech:hover{border-color:rgba(96,165,250,.30)}
.card-tech h3{margin:var(--space-5) 0 var(--space-2); font-size:1.05rem}
.card-tech p{color:var(--color-text-muted)}

/* Caixa do visual técnico de cada dor. */
.viz{
  position:relative; display:flex; overflow:hidden;
  height:120px; border-radius:10px;
  border:var(--border-width) solid var(--hairline);
  background:rgba(0,0,0,.28);
}

/* 1. Câmera sem sinal */
.viz-cam-frame{
  flex:1; margin:10px; position:relative;
  display:flex; align-items:center; justify-content:center;
  border:1px dashed rgba(248,113,113,.35); border-radius:8px;
  background:repeating-linear-gradient(135deg,
    rgba(255,255,255,.035) 0 8px, transparent 8px 16px);
}
.viz-cam-label{position:absolute; top:8px; left:10px; font-size:.625rem; letter-spacing:.06em; color:var(--color-text-muted)}
.viz-cam-sig{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.75rem; font-weight:var(--fw-bold);
  text-transform:uppercase; letter-spacing:.08em; color:var(--color-danger);
}

/* 2. Timeline fragmentada + SLA estourado */
.viz-sla{flex-direction:column; justify-content:center; gap:8px; padding:14px 12px 38px}
.viz-line{display:flex}
.viz-right{justify-content:flex-end}
.viz-faded{opacity:.3}
.viz-chip{display:block; height:12px; border-radius:var(--radius-pill); background:rgba(255,255,255,.09)}
.viz-badge{position:absolute; left:12px; bottom:11px}

/* 3. Indicador esmaecido caindo */
.viz-chart{flex-direction:column; justify-content:flex-end; gap:10px; padding:14px 12px 12px}
.viz-bars{display:flex; align-items:flex-end; gap:6px; height:62px}
.viz-bars i{flex:1; min-height:3px; border-radius:3px 3px 0 0;
  background:linear-gradient(180deg, rgba(148,163,184,.5), rgba(148,163,184,.10))}
.viz-stamp{font-size:.625rem; letter-spacing:.04em; color:var(--color-text-muted)}


/* ==========================================================================
   SEÇÃO DA SOLUÇÃO (alternando esquerda/direita)
   ========================================================================== */
.produtos{display:grid; gap:clamp(44px,6vw,80px)}
.produto{display:grid; gap:clamp(24px,4vw,44px); grid-template-columns:1fr; align-items:center}
@media (min-width:960px){
  .produto{grid-template-columns:.92fr 1.08fr}
  /* Alterna o lado do mockup sem duplicar marcação: só a ordem visual muda,
     a ordem de leitura no DOM segue texto → mockup. */
  .produto-flip .produto-copy{order:2}
  .produto-flip .mock{order:1}
}
.produto-copy{min-width:0}
.produto-copy .eyebrow{margin-bottom:var(--space-4)}
.produto-q{
  font-family:var(--font-display); font-weight:var(--fw-heavy);
  font-size:clamp(1.45rem,3vw,2rem); line-height:1.15; letter-spacing:-.025em;
  margin-bottom:var(--space-4);
}
.produto-copy p{max-width:46ch; font-size:var(--fs-body); color:var(--color-text-secondary)}

/* --- Syntis Monitor: telemetria --- */
.tele{display:grid}
.tele-row{
  display:grid; grid-template-columns:minmax(78px,auto) 1fr auto;
  align-items:center; gap:var(--space-3);
  padding:9px 0; border-bottom:var(--border-width) solid var(--hairline);
}
.tele-row:last-child{border-bottom:0}
.tele-row .mono{
  font-size:.6875rem; letter-spacing:.02em; color:var(--color-text-secondary);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.spark{display:flex; align-items:flex-end; gap:2px; height:28px; min-width:0}
.spark i{flex:1; min-height:3px; border-radius:1px; background:rgba(96,165,250,.5)}
.spark-warn i{background:rgba(251,191,36,.55)}
.spark-down i{background:rgba(248,113,113,.5)}

.alert{
  display:flex; align-items:center; gap:10px;
  padding:11px 13px; border-radius:9px;
  border:var(--border-width) solid rgba(248,113,113,.28);
  background:rgba(248,113,113,.08);
  font-size:.8125rem; color:var(--color-text-secondary);
}
.alert strong{color:#FCA5A5}

/* --- Syntis Incidents: chamado + SLA --- */
.ticket-title{font-size:1rem; font-weight:var(--fw-bold); color:var(--color-text)}
/* O gap do .mock-body separa blocos; título e meta são o MESMO bloco, então a
   meta sobe para colar no título. */
.ticket-meta{margin-top:calc(var(--space-3) * -1 + 4px); font-size:.6875rem; color:var(--color-text-muted)}

.sla{display:grid; gap:7px}
.sla-head{
  display:flex; justify-content:space-between; gap:10px;
  font-size:.625rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--color-text-muted);
}
.sla-head .mono{text-transform:none; letter-spacing:0; color:var(--color-warning)}

.timeline{list-style:none; margin:0; padding:0; display:grid}
.timeline li{
  position:relative;
  display:flex; justify-content:space-between; gap:var(--space-3);
  padding:8px 0 8px 22px;
  font-size:.75rem; color:var(--color-text-muted);
}
.timeline li::before{
  content:""; position:absolute; left:3px; top:12px;
  width:8px; height:8px; border-radius:50%;
  border:var(--border-width) solid var(--color-border-strong); background:var(--color-bg);
}
.timeline li::after{
  content:""; position:absolute; left:6.5px; top:22px; bottom:-2px;
  width:1px; background:var(--hairline-strong);
}
.timeline li:last-child::after{display:none}
.timeline .tl-done{color:var(--color-text-secondary)}
.timeline .tl-done::before{background:var(--color-success); border-color:var(--color-success)}
.timeline .tl-now{color:var(--color-text)}
.timeline .tl-now::before{
  background:var(--color-warning); border-color:var(--color-warning);
  box-shadow:0 0 0 3px rgba(251,191,36,.18);
}

/* --- Syntis View: painel executivo --- */
.tiles{display:grid; gap:9px; grid-template-columns:repeat(auto-fit,minmax(112px,1fr))}
.tile{
  display:flex; flex-direction:column; gap:6px; min-width:0;
  padding:11px 12px; border-radius:10px;
  border:var(--border-width) solid var(--hairline); background:var(--veil-2);
}
.tile-label{font-size:.625rem; text-transform:uppercase; letter-spacing:.08em; color:var(--color-text-muted)}
.tile-value{margin-top:auto; font-family:var(--font-mono); font-size:1.2rem; font-weight:var(--fw-bold); line-height:1; color:var(--color-text)}
.tile-value small{font-size:.62em; opacity:.65}

.chart{
  display:grid; gap:10px;
  padding:12px; border-radius:10px;
  border:var(--border-width) solid var(--hairline); background:var(--veil-1);
}
.chart-bars{display:flex; align-items:flex-end; gap:6px; height:74px}
.chart-bars i{flex:1; min-height:4px; border-radius:3px 3px 0 0;
  background:linear-gradient(180deg, rgba(56,189,248,.8), rgba(1,62,236,.22))}


/* ==========================================================================
   SEGMENTOS
   Grade técnica de 6 células. Os fios de separação NÃO são bordas: são o
   gap de 1px deixando o fundo do <ol> aparecer entre as células. Assim a
   malha se refaz sozinha em 3, 2 ou 1 coluna, sem cálculo de nth-child e sem
   fio duplo ou sobrando na última linha.
   ========================================================================== */
.segmentos{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr;
  gap:var(--border-width); background:var(--hairline-strong);
  border-top:var(--border-width) solid var(--hairline-strong);
  border-bottom:var(--border-width) solid var(--hairline-strong);
}
@media (min-width:600px){ .segmentos{grid-template-columns:repeat(2,1fr)} }
@media (min-width:960px){ .segmentos{grid-template-columns:repeat(3,1fr)} }

.segmentos li{
  display:grid; align-content:start; gap:var(--space-4);
  padding:clamp(22px,2.6vw,30px) clamp(18px,2.2vw,26px);
  /* A célula precisa ser opaca para tapar o fundo que forma os fios. */
  background:var(--color-surface-raised);
  transition:background var(--duration-fast) var(--ease-standard);
}
/* Véu translúcido POR CIMA da cor sólida (duas camadas de background): trocar
   a cor pelo véu deixaria a célula transparente e o fio da malha vazaria. */
.segmentos li:hover{
  background:linear-gradient(var(--veil-2), var(--veil-2)), var(--color-surface-raised);
}

.seg-num{
  font-size:clamp(1.5rem,2.6vw,2.1rem); font-weight:var(--fw-bold); line-height:1;
  letter-spacing:-.02em; color:var(--color-text-muted); opacity:.5;
}
/* Onde o traçado vazado existe, o número vira linha de desenho técnico. */
@supports (-webkit-text-stroke:1px red){
  .seg-num{opacity:1; color:transparent; -webkit-text-stroke:1px var(--color-border-strong)}
  .segmentos li:hover .seg-num{-webkit-text-stroke-color:var(--color-brand)}
}
.seg-copy{min-width:0}
.segmentos h3{margin-bottom:7px; font-size:clamp(1rem,1.5vw,1.12rem); line-height:1.3}
/* Títulos de 1 e de 2 linhas dividem a mesma fileira: reservar duas linhas
   alinha o início das descrições ao longo da fileira inteira. */
@media (min-width:600px){ .segmentos h3{min-height:2.6em} }
.segmentos p{font-size:var(--fs-sm); color:var(--color-text-muted)}


/* ==========================================================================
   NOTA DO FUNDADOR
   ========================================================================== */
.founder{
  position:relative; overflow:hidden;
  padding:clamp(28px,5vw,64px);
  border:var(--border-width) solid var(--hairline-strong);
  border-radius:var(--radius-lg);
  background:linear-gradient(140deg, rgba(30,41,59,.55), rgba(11,15,25,.25));
}
.founder-quote{
  position:absolute; top:-.06em; right:.04em;
  font-family:var(--font-display); font-weight:var(--fw-display);
  font-size:clamp(11rem,26vw,20rem); line-height:1;
  color:rgba(255,255,255,.035);
  pointer-events:none; user-select:none;
}
.founder-copy{position:relative; z-index:1; max-width:64ch}
.founder-text{
  margin:var(--space-6) 0 0;
  padding:0 0 0 var(--space-6);
  border-left:2px solid var(--color-brand);
  font-size:clamp(1.05rem,2.2vw,1.28rem); line-height:1.55;
  color:var(--color-text);
}
.founder-sig{display:flex; align-items:center; gap:14px; margin:var(--space-8) 0 0}
/* Placeholder honesto: monograma da marca no lugar de uma foto de banco. */
.avatar{
  display:grid; place-items:center; flex-shrink:0;
  width:52px; height:52px; border-radius:50%;
  border:var(--border-width) solid var(--hairline-strong);
  background:linear-gradient(135deg, rgba(56,189,248,.30), rgba(1,62,236,.55));
  font-family:var(--font-display); font-weight:var(--fw-display); font-size:1.2rem;
  color:var(--color-text);
}
.founder-sig figcaption{display:grid; gap:2px}
.founder-sig strong{font-size:var(--fs-sm); color:var(--color-text)}
.founder-sig span{font-size:var(--fs-caption); color:var(--color-text-muted)}


/* ==========================================================================
   CTA FINAL
   ========================================================================== */
.cta-section{position:relative; overflow:hidden; background:var(--color-surface-raised)}
.cta-section .wrap{position:relative; z-index:1}
.glow-cta{
  top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(1150px,150%); height:760px;
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(1,62,236,.32), rgba(56,189,248,.12) 40%, transparent 70%);
}
.cta-final{max-width:44rem; margin:0 auto; text-align:center}
.cta-final h2{font-size:clamp(1.9rem,4.6vw,2.9rem); line-height:1.08; letter-spacing:-.03em}
.cta-final .lead{margin:var(--space-5) auto 0; max-width:var(--measure-narrow)}


/* ==========================================================================
   UTILITÁRIOS DE DIMENSÃO DOS MOCKUPS
   Existem porque a CSP (`style-src 'self'`) proíbe atributo style inline:
   toda largura/altura de barra precisa ser uma classe.
   ========================================================================== */
.fill-35{width:35%}  .fill-78{width:78%}  .fill-88{width:88%}  .fill-99{width:99%}

.w-40{width:40%}  .w-55{width:55%}  .w-70{width:70%}

.h-8{height:8%}   .h-18{height:18%}  .h-28{height:28%}  .h-30{height:30%}
.h-38{height:38%} .h-40{height:40%}  .h-45{height:45%}  .h-48{height:48%}
.h-50{height:50%} .h-55{height:55%}  .h-58{height:58%}  .h-60{height:60%}
.h-65{height:65%} .h-70{height:70%}  .h-80{height:80%}  .h-85{height:85%}
.h-88{height:88%} .h-90{height:90%}