/* UAIprimora · estilo só da página Hiperpersonalização (2026-10-07).
   Carrega depois de estilo.css. Cores só dos tokens da casa; contraste conferido à parte,
   porque ferramentas/conferir-contraste.py lê apenas estilo.css. */

/* topo: o botão de agendar sai da coluna da direita, que fica sobre a peça (vermelho sobre vermelho em tela larga),
   e vai para baixo do texto, longe do desenho (ajustes visuais, pedido de Lucas, 2026-10-07) */
.pagina-topo[data-pagina="hiperpersonalizacao"] .pagina-topo-texto { grid-template-columns: minmax(0, 1fr); }
.pagina-topo[data-pagina="hiperpersonalizacao"] .topo-acao { justify-self: start; }
/* sem a coluna do botão, o título se alarga até a cota vertical do desenho: 55% da largura o mantém à esquerda dela */
@media (min-width: 761px) { .pagina-topo[data-pagina="hiperpersonalizacao"] h1 { max-width: min(860px, 55vw); } }

/* gancho: de prateleira × sob medida, reaproveitando a moldura .conversa (antes × depois) */
.comparador svg { display: block; width: 100%; height: auto; }
/* #6B6863 sobre branco: 5,55:1 · #9E1820 sobre #FBEDEE: 7,08:1 (calculado por script, fórmula WCAG) */
.comparador-legenda { font: 500 13px/1.5 'IBM Plex Mono', ui-monospace, monospace; color: var(--cinza-e); }
.conversa-depois .comparador-legenda { color: var(--v3); }

/* por que funciona: a pedra ganha uma face acesa por corte (js/pagina-hiperpersonalizacao.js) */
.pedra { margin-top: 40px; max-width: 420px; }
.pedra svg { display: block; width: 100%; height: auto; }
.pedra-face { transition: opacity .4s var(--curva); }
.pedra.viva .pedra-face:not(.acesa) { opacity: .1; }

/* exemplo grande: ficha de pedido desenhada (decorativa) */
.exemplo-ficha { display: block; width: 100%; height: auto; margin-top: 22px; }

@media (prefers-reduced-motion: reduce) {
  .pedra-face { transition: none; }
}