/* home-saas-20260908a.css (era 20260907b; vídeo das portas a .5 em 08/09 — cache immutable, nome novo) (07/09 à noite: o vídeo do painel entra na janela do bloco 3; antes home-saas-20260907a) — dobras 2 a 4 da home na direção "Sala de controle com as portas do Campo"
   (decisão do Gui em 07/09/2026 à noite sobre o artefato "Três direções para a home", ef8d7c9a):
   (2) vídeo em loop atrás das seis portas, portas de vidro (blur); a foto do posto só no hover (desktop) e ao rolar (mobile);
   (3) três passos em linha e o painel do gestor em largura total — tiles de métrica com sparkline, preparo
       por função com nomes reais de função, curva de evolução, nota legal no rodapé da janela;
   (4) preço do BASIC em bloco de manchete azul e brilho ambiente atrás do card.
   Acervo: estilo-modal (FX-59/61), estilo-factory (comp-dashboard-frame-hero, comp-metric-tile), comp-media-dissolve-vinheta,
   comp-captura-com-brilho-ambiente, comp-bloco-de-manchete, FX-16 (hexágonos), estilo-retool (portas com foto em repouso).
   Só a home carrega esta folha; o compartilhado segue em saas-20260907b.css. Cache immutable: mudou, nome novo. */

/* ============ bloco 2 · seis portas sobre o vídeo ============ */
#portas{position:relative;background:#000;overflow:hidden;isolation:isolate;}
#portas .pv-bg{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:#000 url(/assets/video/portas-loop-poster-20260907a.jpg) center/cover no-repeat;}
#portas .pv-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;filter:saturate(.6) brightness(.95);} /* 08/09 (Gui): .85→.5 para não competir com os cards */
/* véu: escurece o topo (título) e o rodapé (emenda com o bloco 3), deixa o centro respirar */
#portas .pv-bg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 35%,rgba(11,12,14,.3),rgba(11,12,14,.78) 75%),
             linear-gradient(180deg,rgba(11,12,14,.86) 0%,rgba(11,12,14,.18) 26%,rgba(11,12,14,.28) 70%,var(--bg-0) 100%);}
#portas>.container{position:relative;z-index:1;}
#portas .portas{background:transparent;border-color:rgba(255,255,255,.14);}
#portas .porta{background:rgba(18,20,23,.45);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-color:rgba(255,255,255,.12);min-height:236px;}
/* foto do posto: decisão do Gui (07/09, depois da r1) — NÃO fica visível em repouso. Vale a regra compartilhada de saas-20260907b.css:
   aparece no hover/foco no desktop e ao cruzar o meio da tela no mobile (.is-in via IntersectionObserver). Aqui só o vidro no estado com foto. */
#portas .porta.has-foto:hover,#portas .porta.has-foto.is-in{background:rgba(18,20,23,.5);}
#portas .porta .pl,#portas .porta .pn{text-shadow:0 1px 2px rgba(0,0,0,.5);}
/* botão de pausa do vídeo (mesma anatomia do .mg-toggle do herói) */
#portas .pv-toggle{position:absolute;right:16px;bottom:14px;z-index:2;min-height:44px;padding:10px 14px;border:1px solid var(--border-subtle);border-radius:10px;
  background:rgba(11,12,14,.6);color:var(--muted);font-family:var(--mono2);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;}
#portas .pv-toggle:hover{color:var(--text);border-color:var(--brand);}
#portas .pv-toggle:focus-visible{color:var(--text);border-color:var(--brand);outline:2px solid var(--brand);outline-offset:2px;}
#portas .pv-toggle[aria-pressed="true"]{color:var(--text);}
@media (max-width:760px){#portas .pv-bg video{display:none;} #portas .pv-toggle{display:none;} #portas .porta{min-height:200px;}}
@media (prefers-reduced-motion:reduce){
  #portas .pv-bg video{display:none;} #portas .pv-toggle{display:none;}
}

/* ============ bloco 3 · três passos em linha + painel em largura total ============ */
#como-funciona{overflow:hidden;}
.cf-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;position:relative;margin-bottom:36px;}
.cf-steps::before{content:"";position:absolute;left:22px;right:22px;top:22px;height:1px;background:var(--border-subtle);}
.cf-step{position:relative;padding-right:16px;border-radius:8px;}
.cf-step .n{position:relative;z-index:1;width:44px;height:44px;border-radius:999px;display:grid;place-items:center;
  background:var(--bg-0);border:1px solid var(--border-subtle);font-family:var(--mono2);font-size:11px;letter-spacing:.06em;color:var(--text);
  transition:background-color .3s ease-out,border-color .3s ease-out,box-shadow .3s ease-out,color .3s ease-out;}
.cf-step.cf-ativo .n{background:var(--brand);color:#04070D;border-color:var(--brand);box-shadow:0 0 0 6px var(--brand-soft);}
.cf-step h3{font-size:19px;margin:16px 0 6px;letter-spacing:-.01em;}
.cf-step .dor{font-family:var(--body);font-size:14.5px;color:var(--muted);margin:0;max-width:36ch;line-height:1.6;}
@media (hover:hover) and (pointer:fine){
  .cf-steps:has(.cf-step:hover) .cf-step.cf-ativo .n{background:var(--bg-0);color:var(--text);border-color:var(--border-subtle);box-shadow:none;}
  .cf-steps .cf-step:hover .n{background:var(--brand);color:#04070D;border-color:var(--brand);box-shadow:0 0 0 6px var(--brand-soft);}
}

.cf-win{position:relative;}
.cf-win .cf-hex{position:absolute;inset:-40px -40px 0;z-index:0;opacity:.28;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'><path d='M28 2 52 16v32L28 62 4 48V16z' fill='none' stroke='%233B82F6' stroke-opacity='.35' stroke-width='1'/></svg>");
  background-size:56px 64px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 50%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse at 50% 50%,#000 30%,transparent 75%);}
.cf-win .cf-glow{position:absolute;left:8%;right:8%;top:10%;bottom:-10%;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 60%,rgba(59,130,246,.32),rgba(59,130,246,.08) 45%,transparent 70%);filter:blur(30px);}
#como-funciona .cf-win .frame{position:relative;z-index:1;background:rgba(18,20,23,.94);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);}
.cf-win .frame-bar{padding:11px 16px;gap:12px;}
.cf-win .frame-bar b{font-size:10.5px;}
.cf-win .frame-bar .chip-illu{margin-left:6px;}

.cf-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:22px 24px 8px;}
.cf-tile{border:1px solid var(--border-subtle);border-radius:10px;background:var(--bg-2);padding:14px 16px 12px;position:relative;overflow:hidden;min-height:112px;}
.cf-tile .k{font-family:var(--mono2);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);display:block;}
.cf-tile .v{font-family:var(--disp);font-weight:700;font-size:34px;letter-spacing:-.03em;line-height:1.05;margin:8px 0 2px;font-variant-numeric:tabular-nums;color:var(--text);display:block;}
.cf-tile .v small{font-family:var(--disp);font-size:16px;color:var(--muted);font-weight:500;letter-spacing:0;margin-left:4px;}
.cf-tile .d{font-family:var(--mono2);font-size:10.5px;color:var(--brand-2);letter-spacing:.06em;display:block;}
.cf-tile svg{position:absolute;right:10px;bottom:8px;width:88px;height:30px;display:block;}

.cf-two{display:grid;grid-template-columns:1.05fr .95fr;gap:22px;padding:14px 24px 22px;}
.cf-sub{border:1px solid var(--border-subtle);border-radius:10px;background:var(--bg-2);padding:14px 18px 10px;}
.cf-sub .k{font-family:var(--mono2);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);display:flex;justify-content:space-between;gap:12px;margin-bottom:6px;}
.cf-sub .k span{color:var(--muted);}
.cf-sub .cf-bar-row{padding:7px 0;}
.cf-sub .cf-bar-label{flex:0 0 150px;white-space:normal;line-height:1.25;}
.cf-sub .cf-bar-num{color:var(--text);font-variant-numeric:tabular-nums;}
.cf-chart{width:100%;height:150px;display:block;}
.cf-win .cf-pbar i{transform:scaleX(0);}
.cf-win.active .cf-pbar i{transform:scaleX(1);}
.cf-frame-foot.cf-legal{justify-content:flex-start;margin:0;padding:12px 24px 14px;border-top:1px solid var(--border-subtle);}
.cf-legal p{margin:0;font-family:var(--body);font-size:12.5px;line-height:1.55;color:var(--muted);max-width:none;}
.cf-legal p b{color:var(--text);font-weight:500;}

/* referenciais com reduced-motion: a faixa não rola, então quebra em linhas em vez de cortar o primeiro item */
@media (prefers-reduced-motion:reduce){
  .cf-win .cf-pbar i{transform:none;transition:none;}
  .mg-marquee{-webkit-mask-image:none;mask-image:none;}
  .mg-marquee-track{flex-wrap:wrap;width:auto;gap:12px 32px;}
  .mg-track-a{flex-wrap:wrap;gap:12px 32px;}
  .mg-marquee-track .mg-track-b{display:none;}
  .mg-marquee-track .mg-track-a{display:flex;flex-direction:row;flex-wrap:wrap;gap:14px 36px;}
  .mg-marquee-track .mg-track-a>span{white-space:normal;display:flex;flex-direction:column;align-items:flex-start;gap:2px;}
  .mg-marquee-track .mg-track-a>span em{display:block;}
  .mg-marquee-track .mg-track-a>span::after{display:none;}
  .mg-marquee-track .mg-track-a::after{display:none;}
}
@media (max-width:900px){.cf-tiles{grid-template-columns:1fr 1fr;} .cf-two{grid-template-columns:1fr;}}
@media (max-width:760px){
  .cf-steps{grid-template-columns:1fr;gap:18px;margin-bottom:28px;}
  .cf-steps::before{display:none;}
  .cf-step{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;padding-right:0;}
  .cf-step h3{margin-top:9px;font-size:18px;}
  .cf-tiles{padding:16px 14px 6px;gap:10px;}
  .cf-tile{min-height:0;padding:12px 14px 10px;}
  .cf-tile .v{font-size:28px;}
  .cf-tile svg{display:none;}
  .cf-two{padding:10px 14px 16px;gap:12px;}
  .cf-sub{padding:12px 14px 8px;}
  .cf-sub .cf-bar-label{flex-basis:112px;font-size:9.5px;}
  .cf-chart{height:130px;}
  .cf-frame-foot.cf-legal{padding:12px 14px;}
  .cf-win .frame-bar{flex-wrap:wrap;row-gap:6px;}
  .cf-win .frame-bar b{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.5;}
}

/* ============ bloco 4 · preço em bloco de manchete + brilho ambiente ============ */
#produtos .prod-panel{position:relative;overflow:visible;}
#produtos .cf-glow{position:absolute;left:-16%;top:-18%;width:80%;bottom:-26%;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 52%,rgba(59,130,246,.6),rgba(59,130,246,.22) 48%,transparent 80%);filter:blur(22px);}
#produtos .prod-panel .grid2{position:relative;z-index:1;}
#produtos .card .card-price.cf-manchete{background:var(--brand);color:#04070D;border-left:0;border-radius:12px;padding:16px 20px;
  font-family:var(--disp);font-size:32px;letter-spacing:-.02em;}
#produtos .card .card-price.cf-manchete .cf-price-k{display:block;font-family:var(--mono2);font-weight:500;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#04070D;margin-bottom:6px;}
#produtos .card .card-price.cf-manchete small{color:#04070D;}
@media (max-width:640px){#produtos .cf-glow{display:none;}}

/* rev. 8 (07/09 à noite): H1 de dois períodos (condomínio × operação) cabe em três linhas a 40px; a 44px estourava em quatro */
.hero-split .hero-h1{font-size:clamp(28px,2.9vw,40px);}
/* rótulo do produto na seta da porta */
#portas .porta .pa{gap:8px;letter-spacing:.12em;}

/* ============ bloco 3 · vídeo do painel dentro da janela (decisão Gui 07/09 à noite) ============
   O vídeo (1920×1080) já traz a própria janela, a barra com o chip "dados ilustrativos", os hexágonos e o brilho — e a
   câmera passeia pelo painel, então recortar o quadro cortaria as cenas com zoom. Fica o quadro inteiro em 16:9.
   Desktop com movimento: o vídeo; mobile e reduced-motion: a figura desenhada (.cf-fig) continua no lugar. */
.cf-stage{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--bg-0);display:none;border-radius:12px;}
.cf-stage video{position:absolute;inset:0;width:100%;height:100%;display:block;}
/* com o vídeo, a janela do site some: o vídeo já traz a própria janela, os hexágonos e o brilho; fica só a nota legal abaixo */
.cf-win.has-video .frame{background:transparent;border-color:transparent;box-shadow:none;}
.cf-win.has-video .frame-bar{display:none;}
.cf-win.has-video .cf-frame-foot.cf-legal{border-top:0;padding-left:0;padding-right:0;}
.cf-stage .cf-toggle{position:absolute;right:14px;bottom:12px;z-index:2;min-height:44px;padding:10px 14px;border:1px solid var(--border-subtle);border-radius:10px;
  background:rgba(11,12,14,.6);color:var(--muted);font-family:var(--mono2);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;}
.cf-stage .cf-toggle:hover{color:var(--text);border-color:var(--brand);}
.cf-stage .cf-toggle:focus-visible{color:var(--text);border-color:var(--brand);outline:2px solid var(--brand);outline-offset:2px;}
.cf-stage .cf-toggle[aria-pressed="true"]{color:var(--text);}
@media (min-width:761px) and (prefers-reduced-motion:no-preference){
  .cf-win.has-video .cf-stage{display:block;}
  .cf-win.has-video .cf-fig{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
}
/* paridade com o vídeo (UI r1 do vídeo): sem o vídeo, a linha diz o que o painel completo tem; com o vídeo ela some */
.cf-mais{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0;padding:12px 24px 0;font-family:var(--body);font-size:13.5px;color:var(--muted);}
.cf-win.has-video .cf-mais{display:none;}
@media (max-width:760px){.cf-mais{padding:10px 14px 0;}}