/* Componentes do santinho — só consomem os tokens de tokens.css.
   Origem: variante c-cartao-fisico (delta-001). */

/* O ângulo do cartão é uma propriedade registrada: a transição interpola o valor
   e tudo que lê --giro (cartão e sombra) anda junto, quadro a quadro. */
@property --giro { syntax: "<angle>"; inherits: true; initial-value: 0deg; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; } /* o display dos componentes não pode vencer o hidden (R7) */

body {
  margin: 0;
  min-height: 100svh;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  font: var(--md-sys-typescale-body-medium);
  overflow-x: clip; /* no meio do giro o cartão cresce e não pode gerar rolagem lateral */
  -webkit-tap-highlight-color: transparent;
}

:focus-visible { outline: var(--anel-foco) solid var(--foco); outline-offset: var(--anel-foco-afastamento); }

/* Padrão clássico de texto só para leitor de tela (valores fixos do idioma, não de design). */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.pular {
  position: absolute; z-index: 10; top: var(--esp-2); left: var(--esp-2);
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary);
  font: var(--md-sys-typescale-label-large); text-decoration: none;
  translate: 0 calc(-100% - var(--esp-4));
}
.pular:focus { translate: 0 0; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icone {
  width: var(--icone); height: var(--icone); flex: none;
  fill: none; stroke: currentColor; stroke-width: var(--icone-traco);
  stroke-linecap: round; stroke-linejoin: round;
}

/* ── Página: a mesa ── */
.santinho {
  max-width: var(--coluna-max);
  min-height: 100svh;
  margin-inline: auto;
  padding: var(--esp-4) var(--esp-4) calc(var(--esp-4) + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; justify-content: center; gap: var(--esp-6);
  transition: --giro var(--dur-virar) var(--md-sys-motion-easing-emphasized);
}
.santinho:focus { outline: none; }

.falha {
  margin: 0; padding: var(--esp-4);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container-lowest);
  color: var(--md-sys-color-error);
  font: var(--md-sys-typescale-body-large);
}

/* ── Cartão 7:10 e sua sombra ── */
.palco {
  position: relative;
  width: min(100%, calc((100svh - var(--reserva-dock)) * var(--razao-cartao)));
  margin-inline: auto;
  perspective: var(--perspectiva);
}

.cartao, .sombra {
  /* |cos| e |sen| do giro: largura aparente e altura do cartão acima da mesa */
  --abs-cos: max(cos(var(--giro)), calc(-1 * cos(var(--giro))));
  --abs-sen: max(sin(var(--giro)), calc(-1 * sin(var(--giro))));
}

/* Sombra preenchida e desfocada (não box-shadow: box-shadow não pinta dentro da própria caixa,
   e esse "buraco" aparece quando o cartão estreita no giro). */
.sombra {
  position: absolute; inset: var(--sombra-recuo);
  border-radius: var(--md-sys-shape-corner-small);
  background: rgb(var(--ref-tinta-rgb) / calc(var(--sombra-alfa) - var(--abs-sen) * var(--sombra-alfa-giro)));
  filter: blur(calc(var(--sombra-desfoque) + var(--abs-sen) * var(--sombra-desfoque-giro)));
  transform:
    translateY(calc(var(--sombra-y) + var(--abs-sen) * var(--sombra-y-giro)))
    scaleX(max(var(--abs-cos), var(--sombra-largura-min)));
}

.cartao {
  position: relative;
  aspect-ratio: var(--proporcao-cartao);
  transform-style: preserve-3d;
  transform: rotateY(var(--giro)) scale(calc(1 + var(--abs-sen) * var(--elevar-giro)));
  touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
  cursor: grab;
}
[data-arrastando] .cartao { cursor: grabbing; }

[data-arrastando] { transition: none; }
[data-carga="pronto"] { animation: pousar var(--md-sys-motion-duration-extra-long2) var(--md-sys-motion-easing-emphasized-decelerate); }
/* O único movimento que ninguém pediu: o cartão pousa na mesa e mostra que vira. */
@keyframes pousar { from { --giro: var(--giro-pouso); } }

.face {
  position: absolute; inset: 0;
  overflow: hidden;
  border-radius: var(--md-sys-shape-corner-small);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  container-type: inline-size;
  box-shadow: var(--borda-papel);
  transition: visibility 0s linear 0s;
}
/* A face de trás some da árvore de acessibilidade só quando o giro termina */
[data-face="frente"] .face--verso,
[data-face="verso"] .face--frente { visibility: hidden; transition-delay: var(--dur-virar); }
[data-arrastando] .face { visibility: visible; transition-delay: 0s; }

/* Frente: papel + faixa marinho com o lockup em versão negativa */
.face--frente { background: var(--md-sys-color-surface-container-lowest); }

.foto {
  position: absolute; top: var(--foto-topo); left: 50%;
  width: var(--foto-largura); height: auto;
  translate: -50% 0;
  pointer-events: none;
}

.selo {
  position: absolute; z-index: 1;
  top: var(--esp-cartao); left: var(--esp-cartao);
  width: var(--selo-largura); height: auto;
  border-radius: var(--md-sys-shape-corner-extra-small);
  pointer-events: none;
}

.faixa {
  position: absolute; inset: auto 0 0;
  padding: var(--esp-cartao);
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}

.lockup-nome {
  margin: 0;
  font: var(--tipo-heroi-nome);
  letter-spacing: var(--tracking-heroi);
  text-transform: uppercase;
}
.lockup-nome > span { display: block; }
.lockup-nome > span + span { font: var(--tipo-heroi-sobrenome); margin-top: var(--esp-lockup); }

.lockup-linha {
  display: flex; align-items: center; justify-content: space-between; gap: var(--esp-lockup);
  margin: calc(var(--esp-lockup) * 2) 0 0;
}
.lockup-cargo {
  width: min-content;
  font: var(--tipo-heroi-cargo);
  letter-spacing: var(--tracking-cargo);
  text-transform: uppercase;
}
.lockup-numero {
  font: var(--tipo-heroi-numero);
  letter-spacing: var(--tracking-heroi);
  color: var(--md-sys-color-secondary);
}

/* Verso: marinho, QR em placa branca */
.face--verso {
  --foco: var(--md-sys-color-on-primary);
  transform: rotateY(180deg);
  display: flex; flex-direction: column; gap: var(--esp-verso);
  padding: var(--esp-cartao);
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}
.verso-id { display: flex; align-items: baseline; justify-content: space-between; gap: var(--esp-2); margin: 0; }
.verso-nome { font: var(--tipo-verso-nome); }
.verso-numero { font: var(--tipo-verso-numero); letter-spacing: var(--tracking-heroi); color: var(--md-sys-color-secondary); }

.qr { display: grid; justify-items: center; gap: var(--esp-2); margin: auto 0; }
.qr-placa {
  width: max(var(--qr-min), var(--qr-largura));
  overflow: hidden;
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container-lowest);
}
.qr-placa img { display: block; width: 100%; height: auto; }
.qr-dica { text-align: center; font: var(--md-sys-typescale-label-medium); color: var(--md-sys-color-primary-container); }

.verso-acoes { display: flex; gap: var(--esp-2); }
.verso-acoes > .btn { flex: 1; }

.links { display: flex; justify-content: center; gap: var(--esp-3); margin: 0; padding: 0; list-style: none; }
.links:empty { display: none; }

/* Cartão estreito (telas de 320 px): a legenda do QR sai para o rótulo eleitoral (R8) caber inteiro.
   (Container query não lê custom property: valor literal.) */
@container (max-width: 300px) { .qr-dica { display: none; } }

.rodape { margin: 0; text-align: center; font: var(--md-sys-typescale-label-medium); color: var(--md-sys-color-primary-container); }

/* ── Botões ── */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--md-sys-color-primary);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2);
  min-height: var(--alvo-min);
  padding: 0 var(--esp-5);
  border: 0; border-radius: var(--md-sys-shape-corner-full);
  background: var(--btn-bg); color: var(--btn-fg);
  font: var(--md-sys-typescale-label-large); text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
    transform var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}
.btn:hover { background: color-mix(in srgb, var(--btn-bg), var(--btn-fg) var(--md-sys-state-hover-opacity)); }
.btn:active { background: color-mix(in srgb, var(--btn-bg), var(--btn-fg) var(--md-sys-state-pressed-opacity)); transform: scale(var(--escala-pressionado)); }

.btn--ciano { --btn-bg: var(--md-sys-color-secondary); --btn-fg: var(--md-sys-color-on-secondary); }
.btn--contorno { box-shadow: inset 0 0 0 var(--borda-contorno) var(--md-sys-color-outline); }
.face--verso .btn--contorno { --btn-fg: var(--md-sys-color-on-primary); box-shadow: inset 0 0 0 var(--borda-contorno) var(--md-sys-color-on-primary); }
.btn--icone { width: var(--alvo-min); padding: 0; }

.btn-texto {
  min-height: var(--alvo-min);
  padding: 0 var(--esp-2);
  margin-inline-end: calc(var(--esp-2) * -1);
  border: 0; border-radius: var(--md-sys-shape-corner-small);
  background: none; color: var(--md-sys-color-primary);
  font: var(--md-sys-typescale-label-large);
  text-decoration: underline; text-underline-offset: 0.2em;
  cursor: pointer; white-space: nowrap;
}
.btn-texto:hover { text-decoration-thickness: var(--sublinhado-hover); }

/* ── Dock: o que fica na mesa ── */
.dock { display: grid; gap: var(--esp-4); }

.player {
  display: grid; grid-template-columns: var(--alvo-play) minmax(0, 1fr);
  column-gap: var(--esp-4); align-items: start;
}
.play {
  position: relative;
  display: grid; place-items: center;
  width: var(--alvo-play); height: var(--alvo-play);
  border: 0; border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary);
  cursor: pointer;
  transition: transform var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),
    background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.play:hover { background: color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) var(--md-sys-state-hover-opacity)); }
.play:active { transform: scale(var(--escala-pressionado)); }
.play .icone { width: var(--icone-play); height: var(--icone-play); fill: currentColor; stroke: none; }
.play .i-pausa, [data-estado="tocando"] .play .i-tocar { display: none; }
[data-estado="tocando"] .play .i-pausa { display: block; }
.play::after {
  content: ""; position: absolute; inset: calc(var(--anel-carregando) * -1);
  border: var(--anel-carregando) solid transparent; border-top-color: var(--md-sys-color-tertiary);
  border-radius: var(--md-sys-shape-corner-full);
  opacity: 0;
}
[data-estado="carregando"] .play::after { opacity: 1; animation: girar var(--dur-carregando) linear infinite; }
@keyframes girar { to { rotate: 1turn; } }

/* Altura reservada: a frase chega depois do dados.json e, sem reserva, empurraria o cartão centralizado (CLS). */
.frase { margin: 0; min-height: calc(var(--frase-linhas) * 1lh); font: var(--md-sys-typescale-title-medium); text-wrap: pretty; }
.player-linha { display: flex; align-items: center; gap: var(--esp-3); }
.progresso {
  flex: 1; height: var(--progresso-altura); overflow: hidden;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-surface-container-highest);
}
.progresso > span {
  display: block; height: 100%;
  background: var(--md-sys-color-tertiary);
  transform-origin: left; transform: scaleX(var(--progresso, 0));
}
.tempo { font: var(--md-sys-typescale-label-medium); color: var(--md-sys-color-on-surface-variant); font-variant-numeric: tabular-nums; }
.tempo:empty { display: none; }
.player-linha:has(.tempo:empty) .progresso { visibility: hidden; } /* a trilha só aparece depois do primeiro play */
.player-erro { grid-column: 2; margin: 0; font: var(--md-sys-typescale-label-medium); color: var(--md-sys-color-error); }
.player-erro:empty { display: none; }

.acoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-3); }
.acoes .btn { white-space: nowrap; }
/* Abaixo de 360 px os dois rótulos não cabem com ícone; o texto fica, o ícone sai.
   (Media query não lê custom property: valor literal.) */
@media (max-width: 359px) { .acoes .icone { display: none; } }

/* ── Dialogs ── */
.dialogo {
  width: min(calc(100% - 2 * var(--esp-4)), calc(var(--coluna-max) - 2 * var(--esp-4)));
  max-width: none; max-height: calc(100svh - 2 * var(--esp-4));
  padding: 0; border: 0;
  border-radius: var(--md-sys-shape-corner-extra-large);
  background: var(--md-sys-color-surface-container-lowest);
  color: var(--md-sys-color-on-surface);
  box-shadow: var(--md-sys-elevation-level3);
}
.dialogo[open] { animation: abrir-dialogo var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate); }
@keyframes abrir-dialogo { from { opacity: 0; transform: translateY(var(--esp-4)) scale(var(--escala-dialogo-inicial)); } }
.dialogo::backdrop { background: var(--md-sys-color-scrim); }
.dialogo-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-2); padding: var(--esp-2) var(--esp-2) 0 var(--esp-6); }
.dialogo-titulo { margin: 0; font: var(--md-sys-typescale-title-large); }
.dialogo-corpo { padding: var(--esp-2) var(--esp-6) var(--esp-6); }
.dialogo--video .dialogo-corpo { padding: var(--esp-2) var(--esp-4) var(--esp-4); }
.dialogo .btn--icone { --btn-fg: var(--md-sys-color-on-surface-variant); }

.video {
  display: block; width: 100%; height: auto;
  aspect-ratio: var(--proporcao-video);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-on-surface);
}
.transcricao { margin: 0; max-width: var(--medida-texto); font: var(--md-sys-typescale-body-large); }
.propostas-lista { display: grid; gap: var(--esp-3); margin: 0; padding: 0; list-style: none; font: var(--md-sys-typescale-body-large); }
.propostas-lista > li { padding-left: var(--esp-3); border-left: var(--borda-proposta) solid var(--md-sys-color-secondary); }
.propostas-doc { display: inline-block; margin-top: var(--esp-4); }

/* ── Movimento reduzido: troca de face por opacidade, sem rotação ── */
@media (prefers-reduced-motion: reduce) {
  .cartao, .face--verso { transform: none; }
  .face { transition: opacity var(--md-sys-motion-duration-short4) linear, visibility 0s linear 0s; }
  [data-face="frente"] .face--verso,
  [data-face="verso"] .face--frente { opacity: 0; transition-delay: 0s, var(--md-sys-motion-duration-short4); }
  [data-carga="pronto"], .dialogo[open] { animation: none; }
  .btn:active, .play:active { transform: none; }
}