/* A PAGINA DE CADA SISTEMA (16/10/2026)
   Ele: *"cada um vai ter sua pagina propria de apresentacao e login tbm"*. A
   do AtenD'Mobix mora na raiz de aten.dmobix.com.br e a da TV Indoor na de
   tv.dmobix.com.br. Elas vestem a mesma roupa da entrada do D'Mobix
   (`inicio.css` vem antes desta folha): Manrope, a barra escura do app, o
   ciano dos botoes e a tela de verdade num quadro de navegador. Aqui mora so'
   o que e' de pagina de um sistema: a abertura com a tela grande, o desenho
   do que nao se explica em frase e as linhas de recurso. A cor de cada
   sistema chega por `--app-a`, `--app-b`, `--cor-forte` e `--cor-veu` no
   <body>, as mesmas do selo dele na entrada. Muitas regras por linha. */

.topo .marca{white-space:nowrap}
.topo .marca .selo{height:28px;width:28px}
.topo .marca .selo svg{height:56%;width:56%}
.topo .marca i{color:color-mix(in srgb,var(--app-a) 55%,#fff);font-style:normal}

/* ---------- abertura: a frase e a tela grande, sem rodeio ---------- */
.pr-heroi{background:radial-gradient(70% 460px at 50% 0%,var(--cor-veu),transparent 72%),var(--fundo);overflow:hidden;padding:120px 0 84px}
.pr-heroi .heroi-texto{text-align:center}
.pr-heroi h1{font-size:clamp(36px,4.6vw,58px);font-weight:800;letter-spacing:-.035em;line-height:1.06;margin:0 auto 18px;max-width:19ch;text-wrap:balance}
.pr-heroi h1 span{color:var(--cor-forte);display:block}
.pr-heroi .heroi-sub{margin-bottom:28px}
.pr-heroi .tela-real{margin:56px auto 0;max-width:1080px}

/* ---------- a secao que desenha o fato dificil ---------- */
.pr-desenho{background:#fff;border-bottom:1px solid var(--linha);border-top:1px solid var(--linha);padding:96px 0}
.pr-desenho .titulo-secao,.pr-desenho .secao-sub{margin-left:auto;margin-right:auto;text-align:center}
.pr-marcas{display:flex;flex-wrap:wrap;gap:12px 30px;justify-content:center;list-style:none;margin:44px 0 0;padding:0}
.pr-marcas li{align-items:center;display:flex;font-weight:700;gap:10px}
.pr-marcas svg{background:var(--cor-veu);border-radius:50%;color:var(--cor-forte);flex:0 0 auto;height:24px;padding:4px;stroke-width:3;width:24px}

/* AtenD'Mobix: um numero de um lado, a equipe do outro, e as conversas
   correndo pelos fios ate' quem resolve. */
.pr-fila{align-items:center;display:grid;gap:0;grid-template-columns:minmax(0,1fr) 240px minmax(0,1.15fr);margin:44px auto 0;max-width:980px}
.pr-numero{background:linear-gradient(150deg,var(--app-a),var(--app-b));border-radius:24px;box-shadow:0 26px 50px -28px color-mix(in srgb,var(--app-b) 85%,transparent);color:#fff;display:grid;gap:6px;justify-items:start;padding:26px 24px}
.pr-numero .selo{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.35);box-shadow:none;height:50px;width:50px}
.pr-numero b{font-size:22px;font-weight:800;letter-spacing:-.02em;margin-top:8px}
.pr-numero span{color:rgba(255,255,255,.82);font-size:15px;font-weight:600}
.pr-fios{display:block;height:300px;width:240px}
.pr-fios path{fill:none;stroke:color-mix(in srgb,var(--app-a) 38%,#fff);stroke-dasharray:2 7;stroke-linecap:round;stroke-width:3}
.pr-fios circle{fill:var(--app-a)}
.pr-equipe{display:grid;gap:16px;list-style:none;margin:0;padding:0}
.pr-pessoa{align-items:center;background:#fff;border:1px solid var(--linha);border-radius:18px;box-shadow:0 18px 36px -28px rgba(17,25,29,.45);display:grid;gap:4px 12px;grid-template-columns:auto minmax(0,1fr);padding:14px 16px}
.pr-rosto{align-items:center;border-radius:50%;color:#fff;display:inline-flex;font-size:15px;font-weight:800;grid-row:span 2;height:42px;justify-content:center;width:42px}
.pr-pessoa b{font-size:15.5px;font-weight:800}
.pr-pessoa b small{color:var(--fraca);font-size:13.5px;font-weight:700;margin-left:6px}
.pr-balao{background:var(--cor-veu);border-radius:4px 14px 14px 14px;color:var(--tinta);font-size:14px;font-weight:600;justify-self:start;max-width:100%;overflow:hidden;padding:6px 12px;text-overflow:ellipsis;white-space:nowrap}

/* TV Indoor: o dia de cada TV numa regua de horas, com o "agora" andando. */
.pr-dia{background:var(--cartao-2);border:1px solid var(--linha);border-radius:24px;margin:44px auto 0;max-width:1000px;padding:26px 26px 22px}
.pr-regua,.pr-faixa{display:grid;gap:14px;grid-template-columns:132px minmax(0,1fr)}
.pr-horas{color:var(--fraca);display:flex;font-family:var(--mono);font-size:12px;font-weight:700;justify-content:space-between;padding:0 0 10px}
.pr-faixa{align-items:center;margin-top:12px}
.pr-faixa > b{font-size:15px;font-weight:800}
.pr-faixa > b small{color:var(--fraca);display:block;font-size:12.5px;font-weight:650}
.pr-trilho{background:#fff;border:1px solid var(--linha);border-radius:14px;display:flex;height:58px;overflow:hidden;position:relative}
.pr-bloco{align-items:flex-start;border-right:2px solid #fff;color:#fff;display:flex;flex-direction:column;font-size:13.5px;font-weight:800;justify-content:center;line-height:1.2;min-width:0;overflow:hidden;padding:0 12px;white-space:nowrap}
.pr-bloco small{font-family:var(--mono);font-size:11px;font-weight:700;opacity:.82}
.pr-bloco.vazio{background:repeating-linear-gradient(135deg,#f2f4f6 0 6px,#fff 6px 12px);color:var(--fraca)}
.pr-bloco.a{background:linear-gradient(150deg,var(--app-a),var(--app-b))}
.pr-bloco.b{background:linear-gradient(150deg,#c4b0f1,#8a6dd6)}
.pr-bloco.c{background:linear-gradient(150deg,#ef9fc4,#c25c8f)}
.pr-agora{border-left:2px solid var(--tinta);bottom:-4px;left:calc(132px + 14px + (100% - 146px) * var(--agora,.5));pointer-events:none;position:absolute;top:26px}
.pr-agora::before{background:var(--tinta);border-radius:var(--pilula);color:#fff;content:attr(data-hora);font-family:var(--mono);font-size:11px;font-weight:700;left:0;padding:2px 7px;position:absolute;bottom:-24px;transform:translateX(-50%)}
.pr-faixas{position:relative}
.pr-dias{align-items:center;border-top:1px dashed var(--linha-forte);display:flex;flex-wrap:wrap;gap:8px;margin-top:34px;padding-top:16px}
.pr-dias > span{color:var(--media);font-size:14px;font-weight:700;margin-right:6px}
.pr-dias i{background:#fff;border:1px solid var(--linha-forte);border-radius:var(--pilula);color:var(--fraca);font-size:13px;font-style:normal;font-weight:800;padding:4px 11px}
.pr-dias i.sim{background:var(--cor-veu);border-color:color-mix(in srgb,var(--app-a) 45%,#fff);color:var(--cor-forte)}

/* ERP: o ramo escolhido acende os modulos que o cadastro liga para ele. O
   apagado e' tracejado e sem cor: le-se "desligado", nao "ausente". */
.pr-ramos{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:36px auto 0;max-width:920px}
.pr-ramo{background:#fff;border:1.5px solid var(--linha-forte);border-radius:var(--pilula);color:var(--media);cursor:pointer;font-size:14.5px;font-weight:750;padding:9px 16px;transition:background .2s ease,border-color .2s ease,color .2s ease,transform .35s var(--mola)}
.pr-ramo:hover{border-color:var(--cor-forte);color:var(--tinta)}
.pr-ramo:active{transform:scale(.95)}
.pr-ramo:focus-visible{outline:3px solid var(--ciano-claro);outline-offset:3px}
.pr-ramo[aria-pressed="true"]{background:var(--cor-forte);border-color:var(--cor-forte);color:#fff}
.pr-modulos{display:grid;gap:12px;grid-template-columns:repeat(6,minmax(0,1fr));list-style:none;margin:30px auto 0;max-width:1000px;padding:0}
.pr-modulo{align-content:center;background:var(--cartao-2);border:1px dashed var(--linha-forte);border-radius:16px;color:var(--fraca);display:grid;font-size:14px;font-weight:750;gap:8px;justify-items:center;line-height:1.25;min-height:104px;padding:16px 10px;text-align:center;transition:background .3s ease,border-color .3s ease,color .3s ease,box-shadow .3s ease,transform .45s var(--mola)}
.pr-modulo svg{height:26px;opacity:.5;transition:color .3s ease,opacity .3s ease;width:26px}
.pr-modulo.aceso{background:#fff;border:1px solid color-mix(in srgb,var(--app-a) 45%,#fff);box-shadow:0 16px 30px -22px color-mix(in srgb,var(--app-b) 80%,transparent);color:var(--tinta);transform:translateY(-3px)}
.pr-modulo.aceso svg{color:var(--cor-forte);opacity:1}
.pr-modulos-pe{color:var(--fraca);font-size:14.5px;margin:22px auto 0;text-align:center}

/* ---------- ligar a TV: tres passos que acontecem nesta ordem ---------- */
.pr-passos{background:var(--fundo);padding:96px 0}
.pr-passos-grade{counter-reset:passo;display:grid;gap:18px;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;margin:36px 0 0;padding:0}
.pr-passos-grade li{counter-increment:passo;display:grid;gap:10px;align-content:start}
.pr-tv{aspect-ratio:16/10;background:#0b0f12;border-radius:16px;box-shadow:0 22px 40px -26px rgba(17,25,29,.6);display:grid;padding:9px;place-items:stretch;position:relative}
.pr-tv::after{background:#0b0f12;border-radius:0 0 6px 6px;bottom:-10px;content:"";height:10px;left:40%;position:absolute;right:40%}
.pr-tela{align-items:center;background:#16232a;border-radius:9px;color:#fff;display:grid;justify-items:center;overflow:hidden;padding:12px;text-align:center}
.pr-tela svg{color:var(--app-a);height:38px;width:38px}
.pr-tela small{color:rgba(255,255,255,.7);font-size:12.5px;font-weight:650}
.pr-codigo{font-family:var(--mono);font-size:clamp(22px,2.6vw,32px);font-weight:700;letter-spacing:.18em}
.pr-tela.oferta{background:linear-gradient(140deg,var(--app-a),var(--app-b));justify-items:start;padding:18px 20px;text-align:left}
.pr-tela.oferta b{font-size:clamp(17px,1.8vw,22px);font-weight:800;letter-spacing:-.02em;line-height:1.15}
.pr-tela.oferta small{color:rgba(255,255,255,.85)}
.pr-passos-grade h3{align-items:center;display:flex;font-size:19px;font-weight:800;gap:10px;letter-spacing:-.01em;margin:16px 0 0}
.pr-passos-grade h3::before{align-items:center;background:var(--cor-veu);border-radius:50%;color:var(--cor-forte);content:counter(passo);display:inline-flex;flex:0 0 auto;font-size:14px;height:28px;justify-content:center;width:28px}
.pr-passos-grade p{color:var(--media);font-size:15.5px;margin:0}

/* ---------- recursos: tela de verdade ao lado de cada um ---------- */
.pr-recurso{background:#fff;padding:92px 0}
.pr-recurso.cinza{background:var(--fundo)}
.pr-recurso h2{font-size:clamp(26px,3vw,38px);font-weight:800;letter-spacing:-.025em;line-height:1.12;margin:0 0 14px;max-width:20ch;text-wrap:balance}
.pr-recurso p{color:var(--media);font-size:17px;margin:0 0 22px;max-width:52ch}
.pr-recurso .lista-check{margin:0}

/* ---------- e mais: duas colunas de linhas, sem cartao ---------- */
.pr-mais{background:#fff;border-top:1px solid var(--linha);padding:92px 0}
.pr-mais-grade{display:grid;gap:0 48px;grid-template-columns:repeat(2,minmax(0,1fr));list-style:none;margin:34px 0 0;padding:0}
.pr-mais-grade li{align-items:flex-start;border-top:1px solid var(--linha);display:grid;gap:4px 14px;grid-template-columns:auto minmax(0,1fr);padding:20px 0}
.pr-mais-grade .icone{background:var(--cor-veu);color:var(--cor-forte);grid-row:span 2;height:42px;width:42px}
.pr-mais-grade .icone svg{height:21px;width:21px}
.pr-mais-grade b{font-size:17px;font-weight:800}
.pr-mais-grade span:not(.icone){color:var(--media);font-size:15px}

.pr-fim .chamada-caixa p{margin-left:auto;margin-right:auto;max-width:52ch}

/* ---------- telas menores ---------- */
@media (max-width:880px){
  .pr-heroi{padding:100px 0 64px}
  .pr-fila{gap:18px;grid-template-columns:1fr;max-width:460px}
  .pr-fios{display:none}
  .pr-numero{justify-items:center;text-align:center}
  .pr-passos-grade{grid-template-columns:1fr;max-width:460px}
  .pr-modulos{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pr-mais-grade{grid-template-columns:1fr}
}
@media (max-width:600px){
  .topo-acoes .botao.forte,.topo-som{display:none}
  .pr-marcas{align-items:flex-start;flex-direction:column;gap:12px;margin-left:auto;margin-right:auto;max-width:420px}
  .pr-heroi h1{font-size:34px}
  .pr-heroi .tela-real{margin-top:40px}
  .pr-desenho,.pr-passos,.pr-recurso,.pr-mais{padding:64px 0}
  .pr-dia{padding:18px 14px 16px}
  .pr-modulos{gap:8px;grid-template-columns:repeat(3,minmax(0,1fr))}
  .pr-modulo{font-size:12.5px;min-height:88px;padding:12px 6px}
  .pr-ramo{font-size:13.5px;padding:8px 13px}
  .pr-regua,.pr-faixa{gap:10px;grid-template-columns:76px minmax(0,1fr)}
  .pr-agora{left:calc(76px + 10px + (100% - 86px) * var(--agora,.5))}
  .pr-faixa > b{font-size:13px}
  .pr-faixa > b small{display:none}
  .pr-horas span:nth-child(even){visibility:hidden}
  .pr-bloco{font-size:11.5px;padding:0 6px}
  .pr-bloco small{display:none}
}