/* Censo Galeria Holding, formulário público: layout próprio da tela, só com tokens do Design
   System Galeria, na mesma linguagem da pesquisa de comunicação interna. As peças do kit
   (g-frame, g-btn, g-field, g-card, g-progress, g-check) não recebem CSS aqui: quando precisam
   de complemento, levam uma classe desta plataforma. */

.pagina{margin:0;min-height:100vh;display:flex;flex-direction:column}

/* faixa: o fio de progresso mora no pé dela */
.faixa{position:sticky}
.fio{position:absolute;left:0;right:0;bottom:0;border-radius:var(--radius-none)}
.fio > i{border-radius:var(--radius-none)}
.logo-slot{display:flex;align-items:center;color:var(--text-primary)}

/* tela: coluna de margem com o roteiro e o palco com a pergunta */
.tela{flex:1;display:grid;grid-template-columns:var(--margin-col) minmax(0,1fr);column-gap:var(--space-48);padding:var(--space-48) var(--space-48) var(--space-64);align-items:start}
.palco{display:flex;flex-direction:column;gap:var(--space-32);max-width:var(--measure-max);min-width:0}
.palco:focus{outline:0}
.titulo-capa,.palco h2{text-wrap:balance}

.roteiro{position:sticky;top:calc(var(--bar-h) + var(--space-48));display:flex;flex-direction:column;gap:var(--space-4);margin:0;padding:0;list-style:none}
.roteiro li{display:flex;gap:var(--space-8);color:var(--text-support)}
.roteiro li[aria-current="step"]{color:var(--text-primary)}
.roteiro li.feito{color:var(--text-primary)}
.roteiro .posicao{color:var(--text-support);padding-left:var(--space-24)}
.roteiro .numero{min-width:var(--space-16)}

.contexto{display:none;color:var(--text-support)}
.cabeca{display:flex;flex-direction:column;gap:var(--space-8)}
.enunciado{color:var(--text-support)}
.obrigacao{color:var(--text-support)}

/* opções: rótulo clicável inteiro, com o controle nativo dentro */
.opcoes{display:flex;flex-direction:column;gap:var(--space-8);margin:0;padding:0;border:0;min-width:0}
.opcao{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;gap:var(--space-16);min-height:var(--touch-min);padding:var(--space-8) var(--space-24) var(--space-8) var(--space-16);border-radius:var(--radius-pill);background:var(--surface-hover);color:var(--text-primary);cursor:pointer;transition:background-color var(--duration-fast) var(--ease-dry)}
.opcao::before,.empresa::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--platform-highlight);transform:scaleX(0);transform-origin:left;transition:transform var(--duration-soft) var(--ease-soft)}
.opcao:hover::before,.opcao:has(input:checked)::before,.empresa:hover::before,.empresa:has(input:checked)::before{transform:scaleX(1)}
.opcao:has(input:checked){color:var(--platform-on-highlight);font-weight:500}
.opcao:has(input:disabled)::before{display:none}
.opcao:has(input:focus-visible){box-shadow:0 0 0 var(--focus-ring-inner-width) var(--focus-ring-inner),0 0 0 var(--focus-ring-outer-width) var(--focus-ring-outer)}
.opcao:has(input:disabled){background:var(--disabled-fill);color:var(--disabled-text);cursor:var(--cursor-disabled)}
.opcao input{flex:none;margin:0}
.opcao input:focus-visible{box-shadow:none}
.opcao .grau{flex:none;min-width:var(--space-16);color:var(--text-support)}
.opcao:has(input:checked) .grau{color:var(--platform-on-highlight-support)}
.separada{margin-top:var(--space-16)}

.contador{color:var(--text-support)}
.contador.cheio{color:var(--text-primary)}

.campo-outro{margin-top:var(--space-8)}
.campo-largo{max-width:none}
.campo-largo .g-field__input{width:100%}

/* empresas: os logotipos são a variante branca; no claro, escurecem */
.empresas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-8);margin:0;padding:0;border:0;min-width:0}
.empresa{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-8);min-height:calc(var(--touch-min) * 2);padding:var(--space-24) var(--space-16);border-radius:var(--radius-s);text-align:center;background:var(--surface-hover);cursor:pointer;transition:background-color var(--duration-fast) var(--ease-dry)}
.empresa:has(input:checked){color:var(--platform-on-highlight)}
.empresa:has(input:focus-visible){box-shadow:0 0 0 var(--focus-ring-inner-width) var(--focus-ring-inner),0 0 0 var(--focus-ring-outer-width) var(--focus-ring-outer)}
.empresa input{position:absolute;opacity:0;pointer-events:none}
.empresa img{display:block;height:var(--space-32);width:auto;max-width:82%;object-fit:contain;filter:brightness(0)}
.empresa__obs{color:var(--text-support)}
.empresa:has(input:checked) .empresa__obs{color:var(--platform-on-highlight-support)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .empresa img{filter:none}}
:root[data-theme="dark"] .empresa img{filter:none}

/* escala de 0 a 10: onze alvos redondos numa linha que quebra no celular */
.nota{margin:0;padding:0;border:0;min-width:0;display:flex;flex-direction:column;gap:var(--space-8)}
.nota__linha{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:var(--space-4)}
.nota__item{position:relative;display:flex;align-items:center;justify-content:center;min-height:var(--touch-min);border-radius:var(--radius-pill);background:var(--surface-hover);cursor:pointer;transition:background-color var(--duration-base) var(--ease-dry)}
.nota__item:hover{background:var(--surface-hover-deep)}
.nota__item:has(input:checked){background:var(--platform-highlight);color:var(--platform-on-highlight);font-weight:500}
.nota__item:has(input:checked)::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 var(--focus-ring-inner-width) var(--platform-accent);animation:eco var(--duration-soft) var(--ease-soft) both;pointer-events:none}
.nota__item:has(input:checked)::before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 var(--focus-ring-inner-width) var(--platform-accent);animation:eco var(--duration-soft) var(--ease-soft) var(--stagger-arco) both;pointer-events:none}
@keyframes eco{from{transform:scale(1);opacity:1}to{transform:scale(1.7);opacity:0}}
.nota__item:has(input:focus-visible){box-shadow:0 0 0 var(--focus-ring-inner-width) var(--focus-ring-inner),0 0 0 var(--focus-ring-outer-width) var(--focus-ring-outer)}
.nota__item input{position:absolute;opacity:0;pointer-events:none}
.nota__ancoras{display:flex;justify-content:space-between;gap:var(--space-16);color:var(--text-support)}

/* barra de navegação: flutua no pé enquanto a pergunta rola */
.navegacao{position:sticky;bottom:var(--space-16);display:flex;align-items:center;justify-content:space-between;gap:var(--space-8);padding:var(--space-8);border-radius:var(--radius-pill);z-index:10}
.navegacao .direita{display:flex;gap:var(--space-8);margin-left:auto;min-width:0}
.voltar svg{width:var(--space-24);height:var(--space-24);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:none}
.dica-acao{color:var(--text-primary)}

/* capa */
.capa-lista{display:flex;flex-direction:column;gap:var(--space-8);margin:0;padding:0;list-style:none}
.capa-lista li{display:flex;gap:var(--space-16)}
.capa-lista .numero{min-width:var(--space-16);color:var(--text-support)}
.fatos{display:flex;flex-direction:column;gap:var(--space-16);margin:0}
.fatos div{display:flex;flex-direction:column;gap:var(--space-4)}
.fatos dt{font-weight:500}
.fatos dd{margin:0;color:var(--text-support)}
.acoes{display:flex;flex-wrap:wrap;gap:var(--space-16);align-items:center}
.aviso-erro{display:flex;flex-direction:column;gap:var(--space-16)}

/* consentimento e aviso de privacidade */
.consentimento__texto,.aviso{display:flex;flex-direction:column;gap:var(--space-16)}
.aviso__secao{margin-top:var(--space-16);font-size:1.125rem;line-height:1.75rem;font-weight:500}
.aviso-inline{display:flex;flex-direction:column;gap:var(--space-16)}
.aviso-inline__corpo{max-height:calc(var(--space-96) * 5);overflow-y:auto}
.opcao--aceite{border-radius:var(--radius-l);align-items:flex-start;padding:var(--space-16) var(--space-24) var(--space-16) var(--space-16)}
.opcao--aceite input{margin-top:var(--space-4)}

/* canais de escuta */
.canais{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-8)}
.canal{gap:var(--space-4)}
.canal__nome{font-weight:500}
.canal__contato{color:var(--platform-text);overflow-wrap:anywhere}
.canais__texto{max-width:var(--measure-max)}

/* ---------------- vitrine: capa, aberturas e final ---------------- */
.tela--vitrine{grid-template-columns:minmax(0,1fr)}
.tela--vitrine .palco,.palco--largo{max-width:none}
.palco{gap:var(--space-32)}

/* a tela nova entra pelo lado de onde veio: avançar vem da direita, voltar vem da esquerda */
.entra{animation:entrar var(--duration-soft) var(--ease-soft) both}
.entra--frente{--de:var(--space-32)}
.entra--tras{--de:calc(var(--space-32) * -1)}
@keyframes entrar{from{opacity:0;transform:translateX(var(--de))}to{opacity:1;transform:none}}
@keyframes subir{from{opacity:0;transform:translateY(var(--space-24))}to{opacity:1;transform:none}}

.capa{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-8)}
.capa__texto{grid-column:span 5;display:flex;flex-direction:column;justify-content:center;gap:var(--space-24);padding:var(--space-48) var(--space-32) var(--space-48) 0;min-width:0}
.capa__titulo{font-size:clamp(2.75rem,5.4vw,4.5rem);line-height:1;font-weight:400;letter-spacing:-0.05em;text-wrap:balance}
.capa__luz{grid-column:span 7;position:relative;min-height:calc(var(--space-96) * 6);border-radius:var(--radius-s);overflow:hidden;display:flex;align-items:flex-end;justify-content:center;padding:var(--space-48) var(--space-24)}
.capa__cartao{position:relative;z-index:1;width:min(100%,calc(var(--nav-w) + var(--space-64)));gap:var(--space-16);animation:subir var(--duration-soft) var(--ease-reveal) calc(var(--stagger-arco) * 3) both}
.capa__cartao .numero{color:var(--text-on-float-support)}

.mosaico{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-8)}
.mosaico__bloco{border-radius:var(--radius-s);padding:var(--space-24);display:flex;flex-direction:column;gap:var(--space-8);min-height:calc(var(--space-96) * 2);animation:subir var(--duration-soft) var(--ease-reveal) both}
.mosaico__bloco--8{grid-column:span 8}
.mosaico__bloco--4{grid-column:span 4;animation-delay:var(--stagger-chart)}
.mosaico__bloco--tinta{background:var(--surface-inverse);color:var(--text-inverse-primary)}
.mosaico__bloco--tinta .mosaico__rotulo{color:var(--text-inverse-support)}
.mosaico__bloco--cor{background:var(--platform-surface);color:var(--platform-on-surface)}
.mosaico__numero{font-size:3.5rem;line-height:3.5rem;letter-spacing:-0.04em}

.luz{position:absolute;inset:0;overflow:hidden}
.luz__grao{position:absolute;inset:0;opacity:var(--grain);mix-blend-mode:overlay;pointer-events:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23g)'/></svg>")}

.luz--arco{background:var(--arc-base)}
.arco__svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.arco__a{transform-box:fill-box;animation:arco-sobe var(--duration-arco) var(--ease-reveal) both}
.arco__a--2{animation-delay:var(--stagger-arco)}
.arco__a--3{animation-delay:calc(var(--stagger-arco) * 2)}
@keyframes arco-sobe{from{transform:translateY(45%)}to{transform:none}}

.luz--horizonte{background:linear-gradient(180deg,var(--arc-top) 0%,var(--surface-ground) 72%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .luz--horizonte{background:linear-gradient(180deg,var(--arc-base) 0%,var(--surface-ground) 72%)}}
:root[data-theme="dark"] .luz--horizonte{background:linear-gradient(180deg,var(--arc-base) 0%,var(--surface-ground) 72%)}
.horizonte__faixa{position:absolute;left:-15%;right:-15%;bottom:-45%;height:90%;border-radius:var(--radius-mark);background:radial-gradient(closest-side,var(--arc-deep),var(--arc-mid) 45%,transparent);filter:blur(var(--blur-glass));animation:faixa var(--duration-horizonte) var(--ease-reveal) both}
@keyframes faixa{from{transform:translateY(40%);opacity:0}to{transform:none;opacity:1}}

.luz--canelado{display:flex;background:var(--arc-base)}
.canelura{position:relative;overflow:hidden;height:100%;box-shadow:inset 1px 0 0 color-mix(in srgb,var(--arc-on-base) calc(var(--area-veil) * 100%),transparent)}
.canelura__luz{position:absolute;left:0;right:0;top:-50%;height:200%;transform-origin:top;background:linear-gradient(180deg,transparent 0%,var(--arc-deep) 12%,var(--arc-mid) 22%,var(--arc-top) 27%,var(--arc-mid) 32%,var(--arc-deep) 42%,transparent 54%);transform:translateY(var(--dy)) scaleY(var(--sy));animation:canelura var(--duration-canelado) var(--ease-reveal) calc(var(--stagger-canelado) * var(--k)) both}
@keyframes canelura{from{transform:translateY(-75%) scaleY(var(--sy))}to{transform:translateY(var(--dy)) scaleY(var(--sy))}}

.abertura{position:relative;border-radius:var(--radius-s);overflow:hidden;min-height:calc(var(--space-96) * 4);display:flex}
.abertura__conteudo{position:relative;z-index:1;display:flex;flex-direction:column;gap:var(--space-8);padding:var(--space-48);max-width:var(--measure-max)}
.abertura--horizonte .abertura__conteudo{align-self:flex-start}
.abertura--canelado .abertura__conteudo{align-self:flex-end;color:var(--arc-on-base)}
.abertura--canelado .abertura__parte,.abertura--canelado .abertura__conta{color:color-mix(in srgb,var(--arc-on-base) calc(var(--text-on-color) * 100%),transparent)}
.abertura--horizonte .abertura__parte,.abertura--horizonte .abertura__conta{color:var(--text-support)}
.abertura--arco{align-items:flex-end;justify-content:center;padding:var(--space-48) var(--space-24)}
.abertura__cartao{position:relative;z-index:1;width:min(100%,calc(var(--nav-w) * 2));animation:subir var(--duration-soft) var(--ease-reveal) calc(var(--stagger-arco) * 3) both}
.abertura__cartao .abertura__parte,.abertura__cartao .abertura__conta{color:var(--text-on-float-support)}
.abertura__titulo{text-wrap:balance}
.pergunta__titulo{text-wrap:balance}
.abertura__conteudo > *,.abertura__cartao > *{margin:0}
.abertura__conteudo{animation:subir var(--duration-soft) var(--ease-reveal) var(--stagger-chart) both}

/* carta do chairman: Horizonte, a primeira frase como título e a assinatura no pé */
.carta{position:relative;border-radius:var(--radius-s);overflow:hidden;min-height:calc(var(--space-96) * 6);display:flex}
.carta__conteudo{position:relative;z-index:1;display:flex;flex-direction:column;gap:var(--space-16);padding:var(--space-64) var(--space-48) var(--space-96);max-width:calc(var(--measure-max) + var(--space-96));animation:subir var(--duration-soft) var(--ease-reveal) var(--stagger-chart) both}
.carta__conteudo > *{margin:0}
.carta__rotulo{color:var(--text-support)}
.carta__abre{font-size:clamp(2.25rem,4.4vw,3.5rem);line-height:1.05;font-weight:400;letter-spacing:-0.04em;text-wrap:balance}
.carta__texto{display:flex;flex-direction:column;gap:var(--space-8)}
.carta__assina{display:flex;flex-direction:column;padding-top:var(--space-16)}
.carta__nome{font-weight:500}

.final{position:relative;border-radius:var(--radius-s);overflow:hidden;min-height:calc(var(--space-96) * 6);display:flex;align-items:flex-end;padding:var(--space-48)}
.final__cartao{position:relative;z-index:1;width:min(100%,calc(var(--nav-w) * 2));gap:var(--space-16);animation:subir var(--duration-soft) var(--ease-reveal) calc(var(--stagger-arco) * 3) both}

/* deslize para enviar: o botão redondo arrasta a pílula escura; passou de 80%, confirma */
.deslize{position:relative;flex:none;display:flex;align-items:center;width:calc(var(--nav-w) + var(--space-32));max-width:100%;min-height:calc(var(--touch-min) + var(--space-8));padding:var(--space-4);border-radius:var(--radius-pill);background:var(--surface-hover);overflow:hidden}
.deslize__rastro{position:absolute;z-index:0;left:var(--space-4);top:var(--space-4);bottom:var(--space-4);width:calc(var(--touch-min) + var(--x,0px));border-radius:var(--radius-pill);background:var(--surface-inverse);transition:width var(--duration-soft) var(--ease-soft)}
.deslize__rotulo{position:absolute;z-index:1;inset:0;display:flex;align-items:center;justify-content:center;padding-left:var(--touch-min);font-weight:500;color:var(--text-primary);opacity:calc(1 - var(--fracao,0) * 1.4);pointer-events:none;transition:opacity var(--duration-base) var(--ease-dry)}
.deslize__botao{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;width:var(--touch-min);height:var(--touch-min);flex:none;border:0;border-radius:var(--radius-mark);background:var(--platform-primary);color:var(--platform-on-primary);cursor:grab;touch-action:none;transform:translateX(var(--x,0px));transition:transform var(--duration-soft) var(--ease-soft),background-color var(--duration-fast) var(--ease-dry)}
.deslize__botao:hover{background:var(--platform-primary-hover)}
.deslize__botao:active{cursor:grabbing;background:var(--platform-primary-pressed)}
.deslize__botao svg{width:var(--space-24);height:var(--space-24);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.deslize--arrastando .deslize__botao,.deslize--arrastando .deslize__rastro,.deslize--arrastando .deslize__rotulo{transition:none}
.deslize--feito{justify-content:flex-end}
.deslize--feito .deslize__rastro{width:calc(100% - var(--space-8))}
.deslize--feito .deslize__botao{transform:none;cursor:progress}
.deslize--feito .deslize__rotulo{opacity:1;color:var(--text-inverse-primary);padding-left:0;padding-right:var(--touch-min)}
.rodape{padding:var(--space-48)}

@media (max-width:900px){
  .tela{grid-template-columns:minmax(0,1fr);padding:var(--space-24) var(--space-16) var(--space-48)}
  .roteiro{display:none}
  .contexto{display:block}
  .rodape{padding:var(--space-24) var(--space-16) var(--space-32)}
  .empresas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .canais{grid-template-columns:minmax(0,1fr)}
  .carta{min-height:0}
  .carta__conteudo{padding:var(--space-32) var(--space-24) var(--space-96)}
  .titulo-capa{font-size:2.25rem;line-height:2.25rem}
  .pergunta__titulo{font-size:2rem;line-height:2.25rem}

  /* nota de 0 a 10: duas linhas (0 a 5 e 6 a 10), alvos largos para o dedo */
  .nota__linha{grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--space-8)}

  /* barra: com o deslize, ele ocupa a linha de cima inteira e "Voltar" desce */
  .navegacao .direita{flex:1;justify-content:flex-end;min-width:0}
  .navegacao .direita > .g-btn{flex:1;min-width:0}
  .voltar{flex:none;width:calc(var(--touch-min) + var(--space-4));min-height:calc(var(--touch-min) + var(--space-4));padding:0;border-radius:var(--radius-mark)}
  .voltar svg{display:block}
  .voltar__texto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .navegacao:has(.deslize) .voltar{width:auto;padding:0 var(--space-16);border-radius:var(--radius-pill)}
  .navegacao:has(.deslize) .voltar svg{display:none}
  .navegacao:has(.deslize) .voltar__texto{position:static;width:auto;height:auto;overflow:visible;clip:auto}
  .navegacao:has(.deslize){flex-wrap:wrap;border-radius:var(--radius-l)}
  .navegacao:has(.deslize) .direita{order:-1;flex:1 1 100%}
  .deslize{width:100%}

  /* capa: o Arco vira uma faixa no topo e o cartão das partes pousa na borda de baixo dela */
  .capa__texto,.capa__luz,.mosaico__bloco--8,.mosaico__bloco--4{grid-column:1 / -1}
  .capa__texto{padding:var(--space-16) 0 var(--space-32)}
  .capa__luz{display:block;min-height:0;padding:calc(var(--space-96) + var(--space-64)) var(--space-16) 0;overflow:visible;border-radius:0}
  .capa__luz > .luz,.abertura--arco > .luz{bottom:auto;height:calc(var(--space-96) * 2 + var(--space-24));border-radius:var(--radius-s)}
  .capa__cartao{width:100%}
  .mosaico__bloco{min-height:0}
  .mosaico__frase{font-size:1.125rem;line-height:1.75rem;letter-spacing:0}
  .mosaico__numero{font-size:2.5rem;line-height:2.75rem}

  /* aberturas */
  .abertura{min-height:calc(var(--space-96) * 4)}
  .abertura__conteudo{padding:var(--space-24)}
  .abertura--canelado{min-height:calc(var(--space-96) * 5)}
  .abertura--arco{display:block;min-height:0;padding:calc(var(--space-96) + var(--space-64)) var(--space-16) 0;overflow:visible;border-radius:0}
  .abertura__cartao{width:100%}
  .final{padding:var(--space-24) var(--space-16)}
}
@media (prefers-reduced-motion:reduce){
  .opcao,.empresa,.opcao::before,.empresa::before,.nota__item,.deslize__botao,.deslize__rastro,.deslize__rotulo{transition:none}
  .entra,.arco__a,.horizonte__faixa,.canelura__luz,.mosaico__bloco,.capa__cartao,.abertura__cartao,.abertura__conteudo,.final__cartao,.carta__conteudo{animation:none}
  .nota__item:has(input:checked)::after,.nota__item:has(input:checked)::before{display:none}
}