/* Atalaia · peças vivas. Cada palco é uma tela do próprio produto, desenhada com os tokens do app.
   Estado no atributo (data-modo, data-f, data-e, data-v): a mola anda no JS, cor e opacidade em transição curta. */

/* ═══ material comum das telas ═══ */
.tela{position:relative;border-radius:var(--radius-lg);background:var(--paper);border:1px solid var(--line);overflow:hidden}
.tela-cab{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:13px 18px;border-bottom:1px solid var(--line)}
.tela-cab b{font-weight:600;font-size:.9375rem;letter-spacing:-.01em}
.tela-cab span{font-family:var(--mono);font-size:.6875rem;letter-spacing:.03em;color:var(--ink2);white-space:nowrap}
.est{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.6875rem;letter-spacing:.04em;text-transform:uppercase;line-height:1;padding:6px 9px;
  border-radius:var(--radius-full);white-space:nowrap;background:var(--paper-2);color:var(--ink2);border:1px solid transparent;
  transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.est::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto}
.est[data-v="ok"]{background:var(--brand-tint);color:var(--brand-ink)}
.est[data-v="nc"]{background:color-mix(in srgb,var(--nc) 11%,var(--paper));color:var(--nc-txt)}
.est[data-v="warn"]::before{background:var(--warn)}
.est[data-v="na"],.est[data-v="sem"]{background:transparent;border-color:var(--line2);border-style:dashed}
.est[data-v="na"]::before,.est[data-v="sem"]::before{background:transparent;box-shadow:inset 0 0 0 1px currentColor}

/* ═══ o custo de saber tarde: a linha do período ═══ */
.ln{padding:18px 20px 20px}
.ln-cab{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.ln-cab b{font-weight:600;font-size:.9375rem;letter-spacing:-.01em}
.ln-modo{display:grid}
.ln-modo span{grid-area:1/1;justify-self:end;font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--nc-txt);
  transition:opacity .3s var(--ease),transform .45s var(--ease)}
.ln-modo .com{color:var(--brand-ink)}
.ln[data-modo="sem"] .ln-modo .com,.ln[data-modo="com"] .ln-modo .sem{opacity:0;transform:translateY(6px)}
.ln-trilho{position:relative;height:152px;margin:22px 10px 0}
.ln-dias{position:absolute;left:0;right:0;top:64px;height:12px;border-bottom:1px solid var(--line2);
  background:repeating-linear-gradient(90deg,var(--line2) 0 1px,transparent 1px calc(100% / 30))}
.ln-x{position:absolute;left:calc((var(--d) - .5) / 30 * 100%)}
.ln-barra{position:absolute;top:66px;height:8px;left:calc(3.5 / 30 * 100%);width:calc(15 / 30 * 100%);border-radius:4px;background:var(--nc);
  transform-origin:left center;transition:background-color .45s var(--ease)}
.ln[data-modo="com"] .ln-barra{background:var(--brand)}
.ln-falha{top:61px;width:18px;height:18px;margin-left:-9px}
.ln-ponto{position:absolute;inset:0;border-radius:50%;background:var(--nc);border:3px solid var(--paper);transition:background-color .45s var(--ease)}
.ln[data-modo="com"] .ln-ponto{background:var(--brand)}
.ln-x b{position:absolute;white-space:nowrap;font-family:var(--mono);font-size:.6875rem;font-weight:400;letter-spacing:.03em;color:var(--ink2)}
.ln-falha b{bottom:calc(100% + 12px);left:50%;transform:translateX(-50%)}
.ln-med{top:24px;height:84px;width:0;border-left:1.5px dashed var(--ink2)}
.ln-med b{top:-22px;left:0;transform:translateX(-50%)}
.ln-res{position:absolute;top:116px;left:calc(18.5 / 30 * 100%);transform:translateX(-50%);display:grid}
.ln-res .est{grid-area:1/1;justify-self:center;transition:opacity .3s var(--ease),transform .45s var(--ease),background-color .35s,color .35s}
.ln[data-modo="sem"] .ln-res .com,.ln[data-modo="com"] .ln-res .sem{opacity:0;transform:translateY(6px)}
.ln-ev{display:grid;margin-top:6px;padding-top:16px;border-top:1px solid var(--line)}
.ln-ev ol{grid-area:1/1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;transition:opacity .3s var(--ease),transform .45s var(--ease)}
.ln-ev li{font-size:.875rem;line-height:1.45;color:var(--ink2)}
.ln-ev b{display:block;font-family:var(--mono);font-size:.6875rem;font-weight:500;letter-spacing:.03em;color:var(--ink);margin-bottom:4px}
.ln[data-modo="sem"] .ln-ev .com,.ln[data-modo="com"] .ln-ev .sem{opacity:0;transform:translateY(8px)}
@media(max-width:899px){
  .ln-trilho{height:140px;margin-top:18px}
  .ln-ev ol{grid-template-columns:1fr;gap:4px}
  .ln-ev li{font-size:.8125rem}
  .ln-ev b{display:inline;margin:0 8px 0 0}
}

/* ═══ vê: quatro fontes, um quadro ═══ */
.fts{display:flex;flex-wrap:wrap;gap:8px;padding:12px 18px;border-bottom:1px solid var(--line)}
.ft{display:inline-flex;align-items:center;gap:7px;font-size:.875rem;font-weight:500;padding:6px 12px;border-radius:var(--radius-full);border:1px solid var(--line);color:var(--ink2);
  transition:color .35s var(--ease),background-color .35s var(--ease),border-color .35s var(--ease)}
.ft.lida{color:var(--ink)}
.ft.foco{background:var(--brand-tint);border-color:color-mix(in srgb,var(--brand) 35%,transparent);color:var(--brand-ink)}
.crits li{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n e" "f e";column-gap:12px;row-gap:3px;align-items:center;padding:11px 18px;border-top:1px solid var(--line)}
.crits li:first-child{border-top:0}
.c-n{grid-area:n;font-weight:500;font-size:.9375rem;letter-spacing:-.006em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c-f{grid-area:f;font-family:var(--mono);font-size:.6875rem;letter-spacing:.02em;color:var(--ink2);transition:opacity .35s var(--ease)}
.crits .est{grid-area:e}
/* critério ainda não lido: o nome está lá (a régua é conhecida), o estado espera a fonte */
.js .crits li:not(.lida) .c-f{opacity:0}
.js .crits li:not(.lida) .est{background:transparent;border-style:dashed;border-color:var(--line2);color:transparent}
.js .crits li:not(.lida) .est::before{background:var(--line2)}
.crits li.nova{animation:lampejo 1.4s var(--ease) 1}
@keyframes lampejo{from{background:var(--brand-tint)}to{background:transparent}}
@media(max-width:899px){
  .palco .uni .tela-cab{display:none}
  .fts{padding:10px 12px;gap:4px;flex-wrap:nowrap}
  .ft{font-size:.75rem;padding:5px 8px;gap:5px}
  .ft .ic{display:none}
  .crits li{padding:8px 12px;grid-template-areas:"n e"}
  .crits .c-f{display:none}
  .c-n{font-size:.875rem}
}

/* privacidade: o mosaico é a própria imagem em 48 px, ampliada sem suavizar, só na região da pessoa */
.priv{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,64px);align-items:center;
  margin-top:clamp(40px,7vh,96px);padding-top:clamp(48px,8vh,96px);border-top:1px solid var(--line)}
.priv-fig{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:16/10;background:#0B0C0D;--r:30% 47% 12% 39%}
.priv-fig img{width:100%;height:100%;object-fit:cover}
.priv-px{position:absolute;inset:0;background:url('/media/priv-px.webp') center/cover no-repeat;image-rendering:pixelated;clip-path:inset(var(--r) round 4px);transition:opacity .9s var(--ease)}
.priv-tag{position:absolute;left:39%;top:calc(30% - 40px);font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  padding:6px 10px;border-radius:var(--radius-full);color:#ECEEED;background:rgba(11,12,13,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(236,238,237,.16);transition:opacity .6s .3s var(--ease),transform .6s .3s var(--ease)}
.js .priv-fig:not(.entrou) .priv-px{opacity:0}
.js .priv-fig:not(.entrou) .priv-tag{opacity:0;transform:translateY(6px)}
.priv-txt p{color:var(--ink2);margin-top:14px;max-width:44ch}
.priv-txt .forte{color:var(--ink);font-weight:600}
@media(max-width:899px){.priv{grid-template-columns:1fr}}

/* ═══ afere: o instrumento ═══ */
.i-conf{transition:opacity .3s var(--ease)}
.i-ev{position:relative;aspect-ratio:16/10;background:#0B0C0D;overflow:hidden}
.i-ev img{width:100%;height:100%;object-fit:cover;transition:filter .6s var(--ease)}
.instr[data-e="2"] .i-ev img{filter:brightness(.2) saturate(.5)}
.i-box{position:absolute;left:47%;top:34%;width:46%;height:62%;border:2px solid var(--nc);border-radius:4px;background:color-mix(in srgb,var(--nc) 12%,transparent);
  transition:opacity .4s var(--ease),border-color .4s var(--ease),background-color .4s var(--ease),transform .6s var(--ease)}
.instr[data-e="1"] .i-box{border-color:rgba(236,238,237,.9);border-style:dashed;background:transparent}
.instr[data-e="1"].aceito .i-box{border-color:var(--nc);border-style:solid;background:color-mix(in srgb,var(--nc) 12%,transparent)}
.instr[data-e="2"] .i-box,.instr[data-e="3"] .i-box{opacity:0;transform:scale(1.04)}
.i-mapa{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr);gap:8px;padding:14px;background:var(--paper-2);
  opacity:0;transition:opacity .5s var(--ease)}
.instr[data-e="3"] .i-mapa{opacity:1}
.i-mapa span{display:flex;flex-direction:column;justify-content:space-between;padding:8px 10px;border-radius:var(--radius);background:var(--paper);border:1px solid var(--line)}
.i-mapa i{font-family:var(--mono);font-style:normal;font-size:.6875rem;color:var(--ink2)}
.i-mapa b{font-size:1rem;font-weight:600;letter-spacing:-.01em;color:var(--brand-ink)}
.i-mapa .nc b{color:var(--nc-txt)}
.i-mapa .sem{background:transparent;border-style:dashed;border-color:var(--ink2)}
.i-mapa .sem b{font-family:var(--mono);font-size:.6875rem;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:var(--ink2)}
.i-corpo{display:grid;gap:12px;padding:14px 18px 18px}
.i-crit{font-weight:600;letter-spacing:-.01em}
.instr[data-e="3"] .i-crit{display:none}
.i-crit span{display:block;font-family:var(--mono);font-size:.6875rem;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);margin-bottom:3px}
.i-porque{font-family:var(--mono);font-size:.8125rem;line-height:1.6;color:var(--ink2);min-height:6.4em;padding:11px 13px;border-radius:var(--radius);background:var(--paper-2)}
.i-pe{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;min-height:30px}
.i-rev,.i-feito,.i-pedido{display:none}
.instr[data-e="1"]:not(.aceito) .i-rev{display:inline-flex;gap:6px}
.instr[data-e="1"].aceito .i-feito{display:inline}
.instr[data-e="2"] .i-pedido{display:inline-flex}
.i-bt{font-size:.8125rem;font-weight:600;padding:6px 11px;border-radius:7px;background:var(--brand);color:#fff}
:root[data-theme="escuro"] .i-bt{color:#0F1E17}
.i-bt.q{background:transparent;color:var(--ink2);box-shadow:inset 0 0 0 1px var(--line2)}
.i-feito,.i-pedido{font-family:var(--mono);font-size:.6875rem;letter-spacing:.02em;color:var(--ink2);align-items:center;gap:6px}
@media(max-width:899px){
  .palco .instr .tela-cab{padding:9px 12px}
  .i-ev{aspect-ratio:16/8}
  .i-corpo{padding:10px 12px 12px;gap:8px}
  .i-crit{display:none}
  .i-porque{min-height:4.2em;font-size:.75rem;padding:8px 10px}
}

/* ═══ sustenta (a): o celular do zelador e a linha da central ═══ */
.palco-campo{align-items:stretch}
.cl{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px}
.cl-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.cl-txt b{font-weight:600;font-size:.9375rem}
.cl-txt span{font-family:var(--mono);font-size:.6875rem;color:var(--ink2)}
/* o aparelho (moldura, ilha, status e barra de início) vem de .fone, em base.css; aqui só o app de campo */
.celular{--bisel:10px;align-self:center;height:min(560px,calc(100vh - var(--nav) - 200px))}
.cel-tela{--ink:#ECEEED;--ink2:#A2A9A6;--line:#26282A;--line2:#35383B;--paper:#17181A;--paper-2:#1D1F21;--brand:#7FB69A;--brand-ink:#A5D2BB;--brand-tint:#1E2D25;--nc:#D96A52;--nc-txt:#EC8A73}
.cel-v{position:absolute;inset:0;padding:16cqw 5cqw 9cqw;opacity:0;transform:translateX(18px);transition:opacity .35s var(--ease),transform .55s var(--ease)}
.celular[data-v="0"] .v0,.celular[data-v="1"] .v1,.celular[data-v="2"] .v2{opacity:1;transform:none}
.cel-app{display:flex;align-items:center;justify-content:space-between;gap:2cqw;margin:0 1cqw 3cqw;font-size:max(10px,4.4cqw);color:var(--ink2)}
.cel-app b{display:inline-flex;align-items:center;gap:1.8cqw;color:var(--ink);font-weight:600}
.cel-app svg{width:5.2cqw;height:5.2cqw;min-width:10px;min-height:10px}
.cel-tit{font-weight:700;font-size:max(15px,8.6cqw);letter-spacing:-.025em;line-height:1.1;margin:0 1cqw 4cqw}
/* a tarefa chega como notificação: o aviso desce do topo da tela, o aparelho vibra, o aviso sobe e o cartão acende */
.cel-notif{position:absolute;z-index:4;left:3cqw;right:3cqw;top:13cqw;display:flex;align-items:flex-start;gap:3cqw;padding:3.2cqw 3.6cqw;border-radius:6.5cqw;
  background:rgba(52,55,58,.88);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);box-shadow:0 10px 24px -12px rgba(0,0,0,.7);
  opacity:0;transform:translateY(-130%);transition:opacity .3s var(--ease),transform .55s var(--ease);pointer-events:none}
.celular.notifica .cel-notif{opacity:1;transform:none}
.celular.notifica{animation:sis-buzz .45s linear .2s 1}
.cel-notif-ic{flex:0 0 auto;width:9.5cqw;height:9.5cqw;min-width:18px;min-height:18px;border-radius:2.6cqw;background:#1E2D25;color:#A5D2BB;display:grid;place-items:center}
.cel-notif-ic svg{width:62%;height:62%}
.cel-notif-txt{display:flex;flex-direction:column;gap:.5cqw;min-width:0;line-height:1.25}
.cel-notif-app{font-size:max(9px,3.8cqw);color:#A2A9A6}
.cel-notif-txt b{font-size:max(11px,4.8cqw);font-weight:600;color:#ECEEED;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cel-notif-d{font-size:max(10px,4.4cqw);color:#C9CFCC;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.celular.chegou .cel-task{animation:tarefa-nova 1.4s var(--ease) 1}
@keyframes tarefa-nova{from{background:#2C3B33;border-color:rgba(165,210,187,.7)}}
.cel-prazo{align-self:flex-start;font-size:max(10px,4.2cqw);font-weight:600;line-height:1;padding:1.6cqw 2.8cqw;border-radius:999px;background:rgba(217,106,82,.16);color:#EC8A73;white-space:nowrap}
.cel-task{display:flex;flex-direction:column;align-items:flex-start;gap:2cqw;padding:4.5cqw;border-radius:5.5cqw;background:#232527;border:1px solid rgba(127,182,154,.3)}
.cel-task b{font-size:max(12px,6cqw);font-weight:600}
.cel-task .d{font-size:max(10px,4.6cqw);color:var(--ink2)}
.cel-task img{width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;border-radius:3.5cqw;margin:1cqw 0}
.cel-bt{align-self:stretch;display:flex;align-items:center;justify-content:center;gap:2cqw;margin-top:1cqw;padding:4cqw;border-radius:4cqw;background:var(--brand);color:#0F1E17;font-weight:600;font-size:max(11px,5.2cqw)}
.cel-feita{display:flex;align-items:center;gap:3cqw;margin-top:3cqw;padding:3.6cqw 4.5cqw;border-radius:5.5cqw;background:#1B1C1E;color:var(--ink2);font-size:max(10px,4.6cqw);line-height:1.3}
.cel-feita b{display:block;color:var(--ink);font-weight:500;text-decoration:line-through;text-decoration-color:rgba(236,238,237,.4)}
.cel-feita .ic{width:6cqw;height:6cqw;min-width:12px;min-height:12px;padding:1.2cqw;border-radius:50%;background:#1E2D25;color:#A5D2BB;stroke-width:2;box-sizing:content-box}
.v1{padding:0;background:#0B0C0D}
.v1 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* visor ao vivo: leve deriva de mão até o disparo; depois do disparo a imagem para (a foto foi tirada) */
.celular[data-v="1"]:not(.disparou) .v1 img{animation:mao 3.6s var(--ease) both}
@keyframes mao{from{transform:scale(1.1) translate(-2%,1.5%)}to{transform:scale(1.03) translate(0,0)}}
.cel-chip{position:absolute;left:5cqw;display:inline-flex;align-items:center;gap:1.6cqw;font-family:var(--mono);font-size:max(10px,4.2cqw);white-space:nowrap;padding:1.8cqw 3cqw;border-radius:999px;
  background:rgba(11,12,13,.7);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#ECEEED;border:1px solid rgba(236,238,237,.16)}
.cel-chip .ic{width:4.8cqw;height:4.8cqw;min-width:10px;min-height:10px}
.cel-geo{top:17cqw}.cel-gal{top:29cqw}
.cel-geo .ic{color:#7FB69A}
.cel-disp{position:absolute;left:50%;bottom:9cqw;width:22cqw;height:22cqw;margin-left:-11cqw;border-radius:50%;border:max(2px,1.1cqw) solid #ECEEED;display:grid;place-items:center}
.cel-disp::after{content:"";width:78%;height:78%;border-radius:50%;background:#ECEEED;transition:transform .15s ease-out}
.celular.disparou .cel-disp::after{transform:scale(.84)}
.cel-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.celular.disparou .cel-flash{animation:flash .5s ease-out 1}
@keyframes flash{0%{opacity:.8}100%{opacity:0}}
.v2{display:grid;place-items:center;text-align:center}
.cel-ok{display:flex;flex-direction:column;align-items:center;gap:3cqw;padding:0 4cqw}
.cel-ok .ic{width:18cqw;height:18cqw;padding:4.4cqw;border-radius:50%;background:#1E2D25;color:#A5D2BB;stroke-width:2}
.cel-ok b{font-size:max(14px,7cqw);font-weight:600}
.cel-ok span{font-family:var(--mono);font-size:max(10px,4.2cqw);color:var(--ink2)}
@media(max-width:899px){
  .palco-campo{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px}
  .palco-campo > .selo{grid-column:1 / -1}
  .cl{padding:10px 12px;flex-direction:column;align-items:flex-start;gap:10px}
  .celular{--bisel:6px;height:min(310px,40svh)}
  .cel-task .d,.cel-task img,.cel-feita,.cel-notif-d{display:none}
}

/* ═══ sustenta (b): a central, a fila por impacto e o dossiê ═══ */
.ct-exp{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;padding:14px 18px;border-bottom:1px solid var(--line)}
.ct-rot{flex-basis:100%;font-family:var(--mono);font-size:.6875rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink2)}
.ct-num{font-size:clamp(2.4rem,4vw,3.25rem);font-weight:700;letter-spacing:-.04em;line-height:1}
.ct-num .u{font-size:.5em;margin-left:2px;color:var(--ink2);font-weight:600}
.ct-delta{font-family:var(--mono);font-size:.75rem;color:var(--brand-ink);opacity:0;transition:opacity .4s var(--ease)}
.palco-central[data-e="1"] .ct-delta,.palco-central[data-e="2"] .ct-delta{opacity:1}
.ct-fila{position:relative}
.ct-fila li{position:relative;display:grid;grid-template-columns:2.8em minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:10px 18px;border-top:1px solid var(--line);background:var(--paper)}
.ct-fila li:first-child{border-top-color:transparent}
.ct-fila .u{font-family:var(--mono);font-size:.75rem;color:var(--ink2)}
.ct-fila .c{font-size:.9375rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct-fila .p{font-family:var(--mono);font-size:.75rem;color:var(--ink)}
.ct-fila li.feito .c,.ct-fila li.feito .p{color:var(--ink2)}
.ct-fila li.feito .p{text-decoration:line-through}
.ct{transition:opacity .5s var(--ease),transform .6s var(--ease)}
.palco-central[data-e="2"] .ct{opacity:.4;transform:scale(.985)}
/* dossiê: três páginas em leque sobre a central, cada uma legível */
.dos{position:absolute;left:50%;bottom:9%;width:min(500px,98%);height:214px;transform:translateX(-50%);pointer-events:none}
.dos-p{position:absolute;top:0;width:36%;height:100%;display:flex;flex-direction:column;gap:7px;padding:14px 14px 12px;border-radius:12px;background:var(--paper);border:1px solid var(--line2);
  box-shadow:0 22px 44px -20px var(--sombra);opacity:0;transform:translateY(40px);transition:opacity .35s var(--ease),transform .6s var(--ease)}
.dos-p.p1{left:0}.dos-p.p2{left:32%;top:-14px}.dos-p.p3{left:64%;top:-28px}
.palco-central[data-e="2"] .dos-p{opacity:1;transform:none}
.palco-central[data-e="2"] .dos-p.p2{transition-delay:.07s}
.palco-central[data-e="2"] .dos-p.p3{transition-delay:.14s}
.dos-p b{font-size:.875rem;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.dos-k{font-family:var(--mono);font-size:.6875rem;letter-spacing:.04em;text-transform:uppercase;color:var(--brand-ink)}
.dos-d{font-family:var(--mono);font-size:.6875rem;line-height:1.4;color:var(--ink2);margin-top:auto}
.dos-p ol{display:grid;gap:5px;font-size:.6875rem;line-height:1.3;color:var(--ink2)}
.dos-p ol span{display:block;font-family:var(--mono);font-size:.6875rem;color:var(--ink)}
.dos-ab{display:grid;gap:5px}
.dos-ab img{width:100%;height:auto;aspect-ratio:2.2/1;object-fit:cover;border-radius:6px}
@media(max-width:899px){
  .palco .ct .tela-cab{display:none}
  .ct-exp{padding:10px 12px}
  .ct-num{font-size:2rem}
  .ct-fila li{padding:7px 12px;gap:8px;grid-template-columns:2.6em minmax(0,1fr) auto}
  .ct-fila .est{display:none}
  .ct-fila .c{font-size:.8125rem}
  .dos{bottom:3%;height:178px;width:calc(100% - 2 * var(--gut))}
  .dos-p.p2{display:none}
  .dos-p.p1{left:0;width:49%}
  .dos-p.p3{left:51%;width:49%;top:-12px}
  .dos-ab{grid-template-columns:1fr 1fr}
  .dos-ab img{aspect-ratio:1/1}
  .dos-p{padding:9px 9px 8px;gap:5px}
  .dos-p ol{gap:3px}
}

/* ═══ segmentos: a escola grande à esquerda, os outros contratos à direita ═══ */
.segs{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:16px;margin-top:clamp(40px,6vh,64px)}
.seg{position:relative;isolation:isolate;min-height:330px;border-radius:var(--radius-lg);overflow:hidden;background:#101112;color:#ECEEED}
.seg:first-child{grid-row:span 2;min-height:680px}
.seg > img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.seg::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(11,12,13,.9) 0%,rgba(11,12,13,.35) 42%,rgba(11,12,13,0) 66%)}
.seg-box{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);border:1.5px solid rgba(236,238,237,.85);border-radius:4px;transition:opacity .5s var(--ease),transform .9s var(--ease)}
.seg-txt{position:absolute;left:0;right:0;bottom:0;padding:20px 22px 22px}
.seg h3{font-size:clamp(1.4rem,2.2vw,1.9rem);font-weight:700;letter-spacing:-.025em;line-height:1.1}
.seg-nota{display:block;margin-top:4px;font-family:var(--mono);font-size:.6875rem;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:#A2A9A6}
.seg ul{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.seg .est{background:rgba(11,12,13,.62);color:#ECEEED;border-color:rgba(236,238,237,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-family:var(--sans);font-size:.8125rem;letter-spacing:0;text-transform:none;padding:6px 10px;
  transition:opacity .5s var(--ease),transform .6s var(--ease)}
.seg .est::before{background:transparent;box-shadow:inset 0 0 0 1.5px #7FB69A}
.seg .est:nth-child(2){transition-delay:.08s}
.segs-mais{margin-top:28px;max-width:60ch;font-size:1.0625rem;line-height:1.55;color:var(--ink2);text-wrap:pretty}
.segs-mais b{color:var(--ink);font-weight:600}
.js .seg:not(.entrou) .seg-box{opacity:0;transform:scale(1.14)}
.js .seg:not(.entrou) .est{opacity:0;transform:translateY(8px)}
@media(max-width:899px){
  .segs{grid-template-columns:1fr}
  .seg,.seg:first-child{grid-row:auto;min-height:0;aspect-ratio:4/5}
  .seg:not(:first-child){aspect-ratio:16/11}
}

/* ═══ conversa: a cidade ao amanhecer, escura, com o convite ═══ */
.conversa{position:relative;isolation:isolate;min-height:min(92vh,900px);display:flex;align-items:flex-end;overflow:hidden;background:#0B0C0D;color:#ECEEED;
  --ink:#ECEEED;--ink2:#A2A9A6;--ink3:#848B88;--brand:#7FB69A;--brand-ink:#A5D2BB}
.cv-cena{position:absolute;inset:0;z-index:-2}
.cv-cena video{width:100%;height:100%;object-fit:cover}
.cv-scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(11,12,13,.95) 0%,rgba(11,12,13,.62) 44%,rgba(11,12,13,.18) 76%,rgba(11,12,13,.5) 100%)}
.cv-copy{width:100%;padding-top:30vh;padding-bottom:clamp(56px,9vh,104px)}
.cv-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:30px}
.conversa .bt.solid{background:#ECEEED;color:#101112}
.conversa .bt.solid:hover{background:#fff}
.verbete{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:clamp(48px,9vh,96px);padding-top:20px;border-top:1px solid rgba(236,238,237,.14);font-size:1rem;color:var(--ink2)}
.verbete b{color:var(--ink);font-weight:600}
.verbete i{font-family:var(--mono);font-style:normal;font-size:.75rem}
.loop-pausa{position:absolute;z-index:2;right:var(--gut);top:24px}
.rm .loop-pausa{display:none}

/* ═══ movimento reduzido: as peças trocam de estado por esmaecimento, sem deslizar nem escalar ═══ */
.rm .cel-v,.rm .dos-p,.rm .ln-modo span,.rm .ln-res .est,.rm .ln-ev ol,.rm .priv-tag,.rm .seg .est,.rm .seg-box,.rm .ct{transform:none!important;transition-property:opacity,color,background-color,border-color!important}
.rm .cel-notif{display:none}
.rm .celular.notifica,.rm .celular.chegou .cel-task{animation:none}