/* IDSR · /agencias: o layout vem do site.css (mesmas peças da home nos itens parecidos: hero, ingresso, FAQ em chat,
   chamada final, .cab/.t2, --secao, .wrap). Aqui só o que é da página: as peças próprias da agência e a assinatura C8 Cinema.
   Fluidez (HD 4000): por quadro só transform e opacity; tudo do cinema é camada parada. */
.apoio { color: var(--creme-70); }
.secao-alternada .apoio { color: rgba(39, 32, 29, .72); }

/* ---------- hero: mesmo .hero/.hero-titulo da home, sem a névoa: fundo noite com o efeito Cinema; o reel no lugar do card ---------- */
/* hero: o mesmo palco da home (o card do reel cresce até a tela cheia). Aqui o título é mais baixo, então o card começa maior */
@media (min-width: 768px) {
  .ag-hero .hero-slot { grid-column: 6 / -1; max-width: min(calc((100svh - var(--hud)) * .7 * 1.6), calc((100svh - var(--hud) - 2.05 * 5.3vw - 225px) * 1.6)); }
}
.ag-rot { color: var(--creme); }
/* a palavra à mão fica na segunda linha: um respiro a mais entre as linhas para o "f" não encostar na de cima */
.hero-titulo .ag-l2 { margin-block: .1em 0; }
.js .ag-l2 .ht-corte > span { transition-delay: .1s; }

/* ---------- C8 Cinema (Casa di Solare 3D-SOLARE-3), versão leve: vinheta (só no hero) e grão parados em camada CSS
   por baixo do conteúdo, como no lab, onde o pós-processamento vale para a cena e não para a interface;
   aberração cromática parada no título (sombras vermelha e azul), brilho (bloom) parado na palavra à mão;
   a câmera na mão é um balanço só por transform no conteúdo do hero (agencias.js), parado enquanto a página rola ---------- */
/* palavra à mão que troca (hero e contato): empilhadas no mesmo lugar; sai para cima, entra por baixo (curva Osmo, ritmo Cinema) */
.palavra-troca, .hero-titulo .palavra-troca { display: inline-grid; justify-items: start; vertical-align: baseline; transition: width .8s var(--ease-padrao); }
.palavra-p { grid-area: 1 / 1; white-space: nowrap; opacity: 0; transform: translateY(.5em) rotate(6deg); transition: opacity var(--dur-micro) var(--ease-texto), transform var(--dur-entrada) var(--ease-transicao); }
.palavra-p.on { opacity: 1; transform: none; }
.palavra-p.sai { opacity: 0; transform: translateY(-.5em) rotate(-6deg); }

/* ---------- como funciona: fundo roxo com grão, como o "Como funciona" da home; colunas grudadas (SECAO-CRENCY-6) ---------- */
.ag-como { background: var(--roxo); padding-block: var(--secao); }
.ag-como .cab .rotulo { color: var(--creme-50); }
.ag-pista { position: relative; }
.ag-fixo { position: relative; }
.ag-colunas { position: relative; display: grid; gap: 0; padding-left: 44px; }
.ag-linha { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ag-linha .base { stroke: var(--linha-forte); stroke-width: 2px; stroke-dasharray: 2 7; }
.ag-linha .cheia { stroke: var(--brasa); stroke-width: 3px; }
/* a parte cheia da linha aparece por uma janela que anda por transform (nada de redesenhar o traço por quadro) */
.ag-linha-janela { position: absolute; inset: -240px; overflow: hidden; pointer-events: none; will-change: transform; }
.ag-linha-miolo { position: absolute; inset: 0; will-change: transform; }
.ag-linha--cheia { inset: 240px; width: auto; height: auto; }
/* a cabeça da linha: o ponto brasa que desliza pela curva */
.ag-cabeca { position: absolute; left: 0; top: 0; z-index: 2; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--brasa); box-shadow: 0 0 0 5px rgba(255, 56, 49, .22), 0 0 18px rgba(255, 56, 49, .55); opacity: 0; transition: opacity .5s var(--ease-texto); will-change: transform; pointer-events: none; }
.ag-cabeca.on { opacity: 1; }
.ag-passo { position: relative; padding: 0 0 56px; }
.ag-passo:last-child { padding-bottom: 0; }
/* os passos acendem suave: opacidade e uma leve subida na curva Osmo (o marcador fica parado em cima da linha) */
.ag-passo > :not(.ag-ponto) { opacity: .3; transform: translateY(18px); transition: opacity 1s var(--ease-padrao), transform 1.2s var(--ease-padrao); }
.ag-passo > .ag-txt { transition-delay: .08s; }
.ag-passo > .ag-semmarca { transition-delay: .16s; }
.ag-passo.aceso > :not(.ag-ponto) { opacity: 1; transform: none; }
.ag-ponto { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--creme); left: -44px; top: 10px; margin-left: 9px; }
.ag-ponto::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--brasa); background: var(--noite); transform: scale(0); transition: transform .9s var(--ease-padrao); z-index: -1; }
.ag-ponto::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--brasa); transform: scale(0); transition: transform .9s var(--ease-padrao) .05s; }
.aceso .ag-ponto::before, .aceso .ag-ponto::after { transform: scale(1); }
.ag-num { font: var(--peso-titulo) clamp(64px, 8vw, 128px)/.8 var(--font-titulo); color: var(--brasa); letter-spacing: -.04em; }
.ag-txt { margin-top: 18px; font-size: clamp(19px, 1.6vw, 24px); line-height: 1.35; font-weight: 600; max-width: 22ch; }
.ag-semmarca { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; }
.ag-semmarca svg.logo { width: 92px; height: auto; opacity: .55; }
.ag-logo-riscado { position: relative; display: inline-block; }
.ag-logo-riscado svg.risco { position: absolute; left: -10%; top: 15%; width: 120%; height: 70%; overflow: visible; }
.ag-logo-riscado .risco path { fill: none; stroke: var(--brasa); stroke-width: 5px; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .8s var(--ease-padrao) .3s; }
.aceso .ag-logo-riscado .risco path { stroke-dashoffset: 0; }
@media (min-width: 900px) {
  .ag-como { padding-block: 0 clamp(56px, 7vw, 120px); }   /* o palco preso ocupa a tela; embaixo, o respiro onde a próxima seção sobe */
  .ag-pista { height: 260svh; }
  .ag-fixo { position: sticky; top: 0; height: 100svh; display: grid; grid-template-rows: auto 1fr; padding-top: calc(var(--hud) + 32px); padding-bottom: 6svh; }
  .ag-fixo .cab { margin-bottom: 0; }
  .ag-colunas { grid-template-columns: repeat(4, 1fr); gap: 28px; padding-left: 0; align-content: end; padding-top: 110px; }
  .ag-passo { padding: 0; border-left: 1px solid var(--linha); padding-left: 22px; }
  .ag-ponto { left: 22px; top: -92px; margin-left: 0; }
}

/* ---------- entregas e prazos: tabela longa (SECAO-BPCO-4) sobre a névoa do céu C3 (ceuHero em modo vigia, site.js);
   a névoa esfuma em cima e embaixo (vira noite nas emendas) e um véu noite garante a leitura ---------- */
.ag-entregas { padding-block: var(--secao); overflow: clip; isolation: isolate; }
/* a névoa esfuma em cima e embaixo por um degradê noite por cima (máscara num canvas que redesenha custa a cada quadro) */
.ag-entregas { position: relative; }
.ag-entregas::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(var(--noite), rgba(39, 32, 29, 0) 22%, rgba(39, 32, 29, 0) 78%, var(--noite)); }
.ag-entregas::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: rgba(39, 32, 29, .34); }
.ag-entregas > .wrap { position: relative; z-index: 1; }
.tabela { border-top: 1.5px solid var(--creme); font-family: var(--font-mono); }
.tabela-linha { position: relative; display: grid; grid-template-columns: 34px 1fr; gap: 4px 14px; padding: 18px 8px; border-bottom: 1px solid var(--linha); transition: background-color .35s, color .35s, padding .5s var(--ease-padrao); }
.tabela-linha:hover { background: var(--creme); color: var(--noite); }
.tabela-cab { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--creme-50); padding-block: 14px; }
.tabela-cab:hover { background: none; color: var(--creme-50); }
.tabela-n { font-size: 12px; opacity: .6; padding-top: 3px; }
.tabela-e { font: 600 clamp(19px, 2vw, 28px)/1.2 var(--font-corpo); letter-spacing: -.01em; }
.tabela-p { grid-column: 2; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.tabela-nota { margin-top: 22px; font: 12px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--creme-50); }
@media (min-width: 900px) {
  .tabela-linha { grid-template-columns: 64px 1fr 260px; padding: 22px 12px; align-items: center; }
  .tabela-p { grid-column: auto; text-align: right; }
  .tabela-linha:not(.tabela-cab):hover { padding-left: 24px; }
}
@media (max-width: 899px) { .tabela-cab { display: none; } }

/* ---------- créditos: o ingresso dos planos da home (.ingresso), empilhados na direita; a moeda 3D (F5) presa à esquerda ---------- */
.ag-creditos { padding-block: var(--secao); }
.ag-cred-grade { display: grid; gap: 8px; }
.ag-ingressos { gap: clamp(18px, 2.4vw, 28px); }
/* "nenhuma" e "3 meses" são mais longos que o prazo da home: no celular o botão desce para a linha de baixo em vez de vazar do cartão */
.ag-ingressos .ingresso-canhoto { flex-wrap: wrap; }
.ag-ingressos .ingresso-canhoto b { white-space: nowrap; }
.ag-creditos { position: relative; isolation: isolate; }
.ag-creditos > .wrap { position: relative; z-index: 1; }
.ag-chuva { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ag-chuva-gl { position: sticky; top: 0; height: 100vh; height: 100svh; }
.ag-chuva-gl canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ag-moeda { display: none; }
.sem-moeda .ag-moeda { display: none; }
@media (min-width: 1000px) {
  .ag-cred-grade { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 4vw, 72px); align-items: start; }
  .ag-moeda { display: block; }
  .ag-ingressos { grid-template-columns: none; }
  .sem-moeda .ag-cred-grade { grid-template-columns: none; }
  .sem-moeda .ag-ingressos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* seletor de tamanho dentro do ingresso (mesma pílula do alternador da home, em 3) */
.nivel { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
.nivel-rot { font: 11px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(39, 32, 29, .55); }
.nivel-sel { --i: 1; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1.5px solid var(--noite); border-radius: calc(var(--raio-botao) + 3px); padding: 3px; }
.nivel-sel button { position: relative; z-index: 1; min-height: 40px; padding: 6px 16px; font: 500 14px var(--font-mono); letter-spacing: .04em; color: var(--noite); border-radius: var(--raio-botao); transition: color .7s var(--ease-padrao); }
.nivel-sel button[aria-checked="true"] { color: var(--creme); }
.nivel-pilula { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 3); border-radius: var(--raio-botao); background: var(--noite); transform: translateX(calc(var(--i) * 100%)); transition: transform .7s var(--ease-padrao); }
/* selo de desconto ao lado do valor: carimbo brasa, levemente torto (o "cheio" do avulso fica em contorno) */
.ingresso-preco .selo-desc { align-self: center; margin-left: .25em; padding: .3em .55em .25em; font: 600 16px/1 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--creme); background: var(--brasa); border-radius: 6px; transform: rotate(-4deg); }
.ingresso-preco .selo-desc.cheio { color: var(--noite); background: none; box-shadow: inset 0 0 0 1.5px var(--noite); font-size: 12px; }
.ingresso-preco .rolo ~ .mes { margin-left: -2px; }

/* ---------- garantias carimbadas (MICRO-CRENCY-1), seção creme com grão ---------- */
.ag-garantias { padding-block: var(--secao); overflow: clip; }
.colagem { position: relative; display: grid; gap: 22px; padding-block: 10px; }
.colagem-svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.colagem-svg .traco { stroke: var(--noite); stroke-width: 3px; }
.colagem-svg { will-change: transform; }
.colagem-caneta { position: absolute; left: 0; top: 0; width: 70px; height: 80px; overflow: visible; z-index: 3; pointer-events: none; opacity: 0; transform-origin: 10px 70px; will-change: transform, opacity; }
.colagem-svg .ancora { fill: var(--brasa); stroke: var(--noite); stroke-width: 2px; }
.sticker { position: relative; z-index: 2; padding: 22px 22px 24px; border-radius: 20px; border: 5px solid var(--creme); box-shadow: 8px 10px 0 rgba(39, 32, 29, .16); display: grid; gap: 10px; transform: rotate(var(--rot, 0deg)); max-width: 420px; }
.sticker:nth-of-type(even) { justify-self: end; }
.sticker--noite { background: var(--noite); color: var(--creme); }
.sticker--brasa { background: var(--brasa); color: var(--noite); }
.sticker--roxo { background: var(--roxo); color: var(--creme); }
.sticker-t { font: var(--peso-titulo) clamp(20px, 2vw, 28px)/1 var(--font-titulo); text-transform: uppercase; letter-spacing: -.01em; }
.sticker-n { font: 11px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.sticker p:last-child { font-size: 15.5px; line-height: 1.45; }
.js .sticker { opacity: 0; transform: rotate(var(--rot, 0deg)) scale(.5); transition: opacity var(--dur-micro) var(--ease-texto), transform var(--dur-micro) cubic-bezier(.34, 1.5, .5, 1); }
.js .sticker.carimbado { opacity: 1; transform: rotate(var(--rot, 0deg)) scale(1); }
.caneta-g path { vector-effect: non-scaling-stroke; }
@media (min-width: 1000px) {
  .colagem { display: block; height: 760px; max-width: 1360px; margin-inline: auto; }
  .sticker { position: absolute; width: 330px; }
  .sticker:nth-of-type(1) { left: 0; top: 20px; --rot: -5deg; }
  .sticker:nth-of-type(2) { left: 30%; top: 0; --rot: 3deg; width: 360px; }
  .sticker:nth-of-type(3) { right: 0; top: 60px; --rot: -3deg; width: 380px; }
  .sticker:nth-of-type(4) { left: 9%; top: 400px; --rot: 4deg; width: 360px; }
  .sticker:nth-of-type(5) { left: 50%; top: 440px; --rot: -4deg; width: 370px; }
}
@media (max-width: 999px) { .sticker { --rot: calc(var(--r, 1) * 2.4deg); } .sticker:nth-of-type(odd) { --r: -1; } }

/* ---------- portfólio secreto (SECAO-HAOQI-4); ao abrir, a fita da home com o piso de grade C2 ---------- */
.ag-portfolio { padding-block: var(--secao); overflow-x: clip; }
.cofre { display: grid; justify-items: center; gap: 20px; text-align: center; padding: clamp(40px, 6vw, 88px) 16px; border: 1px dashed var(--linha-forte); border-radius: var(--raio-card); margin-top: clamp(32px, 5vw, 64px); }
.cofre-rotulo { color: var(--creme-50); }
.digitos { display: flex; gap: clamp(8px, 1.6vw, 16px); cursor: text; }
.digitos span { position: relative; width: clamp(38px, 9vw, 48px); aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--linha-forte); transition: box-shadow .25s, background-color .25s; }
.digitos span.cheio { box-shadow: inset 0 0 0 4px var(--creme); background: radial-gradient(circle, var(--creme) 0 28%, transparent 30%); }
.digitos span.atual::after { content: ""; position: absolute; left: 50%; top: 28%; bottom: 28%; width: 2px; margin-left: -1px; background: var(--brasa); animation: pisca 1s steps(1) infinite; }
.digitos.liberando span.cheio { box-shadow: inset 0 0 0 4px var(--brasa); background: radial-gradient(circle, var(--brasa) 0 28%, transparent 30%); }
.cofre-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.cofre-msg { min-height: 1.3em; font: 13px var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--brasa); }
.cofre-msg .mao { font-size: 30px; letter-spacing: 0; text-transform: none; display: inline-block; transform: rotate(-4deg); }
.treme { animation: treme .5s linear; }
@keyframes treme { 0%, 100% { transform: translateX(0); } 14% { transform: translateX(-10px); } 28% { transform: translateX(10px); } 42% { transform: translateX(-8px); } 57% { transform: translateX(8px); } 71% { transform: translateX(-4px); } 85% { transform: translateX(4px); } }
.cofre { transition: opacity .3s var(--ease-texto), transform .3s var(--ease-texto); }
.cofre.sai { opacity: 0; transform: scale(.98); }
.cofre[hidden] { display: none; }
.cofre-aberto { display: none; }
/* a fita é montada escondida e fora da tela (a 3D não desenha enquanto espera o clique) */
/* montada fora da janela, de lado (não em cima de outra seção): o observador vê como invisível, então não renderiza nem responde ao mouse */
.cofre-aberto.prep { display: block; position: fixed; left: 0; top: 0; width: 100%; transform: translateX(-300vw); visibility: hidden; pointer-events: none; }
.cofre-aberto.on { display: block; animation: cofre-entra .7s var(--ease-padrao) both; }
@keyframes cofre-entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.cofre-aberto .fita { padding-top: clamp(32px, 4vw, 56px); }
.cofre-aberto .apoio { max-width: 52ch; }

/* ---------- qualificador (CTA-PXP-1): abre pelo botão da chamada final ---------- */
.quali { position: fixed; inset: 0; z-index: 700; background: var(--noite); display: none; flex-direction: column; padding: calc(var(--hud) + 8px) var(--g) var(--g); clip-path: inset(100% 0 0 0); transition: clip-path .9s var(--ease-transicao); }
.quali.montado { display: flex; }
.quali.aberto { clip-path: inset(0); }
.quali-topo { display: flex; justify-content: space-between; align-items: center; font: 12px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--creme-70); padding-bottom: 18px; border-bottom: 1px solid var(--linha); }
.quali-topo button { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--creme); display: grid; place-items: center; }
.quali-passo { flex: 1; display: none; flex-direction: column; justify-content: center; gap: 28px; padding-block: 24px; }
.quali-passo.on { display: flex; }
.quali-passo h2 { font-size: clamp(32px, 5.6vw, 84px); }
.quali-opcoes { display: grid; gap: 10px; }
.quali-opcoes button { display: flex; justify-content: space-between; align-items: center; gap: 16px; text-align: left; padding: 16px 20px; border: 1.5px solid var(--linha-forte); border-radius: 12px; font: var(--peso-titulo) clamp(22px, 3vw, 40px)/1 var(--font-titulo); text-transform: uppercase; transition: background-color .3s, color .3s, border-color .3s; }
.quali-opcoes button small { font: 12px var(--font-mono); letter-spacing: .12em; color: var(--creme-50); text-transform: uppercase; }
.quali-opcoes button:hover, .quali-opcoes button:focus-visible { background: var(--creme); color: var(--noite); border-color: var(--creme); }
.quali-opcoes button:hover small { color: rgba(39, 32, 29, .6); }
.quali-resumo { font: 13px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--creme-70); }
.quali-resumo b { color: var(--brasa); font-weight: 400; }
@media (min-width: 900px) { .quali-opcoes { grid-template-columns: repeat(3, 1fr); } .quali-opcoes button { flex-direction: column; align-items: flex-start; min-height: 150px; padding: 22px; } }

@media (max-width: 420px) {
  body[data-pagina="agencias"] .hud-relogio { display: none; }
  body[data-pagina="agencias"] .hud-meio .no-ar-txt { display: inline; font-size: 11px; letter-spacing: .1em; }
}
/* nenhuma parte da linha encolhe (o "faz" nunca é cortado pela palavra que troca) */
.ht-l1 > * { flex-shrink: 0; }