/* =========================================================================
   Template Ads — home v2.2 (correções de layout e contraste)
   Herda v2 + v2.1 e corrige: órbita proporcional (sem corte entre 861 e
   1279px), menu sem quebra, ícones SVG inline, contraste do selo e dos
   marcadores pequenos.
   ========================================================================= */

/* ---------- Ícones SVG inline (substituem a biblioteca externa) ---------- */
.i {
  width: 1.15em; height: 1.15em; flex: none; display: inline-block; vertical-align: -0.2em;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.i-lg { width: 28px; height: 28px; color: var(--action); }
.btn .btn-icon .i { width: 20px; height: 20px; transition: transform 0.35s var(--ease); }
.btn-sm .btn-icon .i { width: 17px; height: 17px; }
.btn:hover .btn-icon .i { transform: translateX(3px); }
.link-arrow .i { width: 18px; height: 18px; }
.btn-ghost .i { width: 20px; height: 20px; color: var(--action); }
.btn-ghost:hover .i { color: var(--accent-on-dark); }
.path-live .btn-ghost .i { color: var(--accent-on-dark); }
.path-live .btn-ghost:hover .i { color: var(--action); }
.faq-item summary .i { width: 20px; height: 20px; color: var(--action); transition: transform 0.35s var(--ease); }
.faq-item[open] summary .i { transform: rotate(45deg); }
.compare td .i { width: 17px; height: 17px; margin-right: 8px; vertical-align: -0.2em; }
.compare td.old .i { color: var(--stone-600); }
.compare td.us .i { color: var(--action); }

/* ---------- Contraste: texto pequeno sobre coral usa o coral de AÇÃO ---------- */
.service-featured .tag { background: var(--action); }         /* selo do destaque: contraste 5,2:1 */
.q-list li::before { background: var(--action); }              /* números 1-4 da conversa (15px) */
.link + .link::before { background: var(--action); }           /* setas entre os 5 elos */

/* ---------- Menu: nunca quebra linha; some abaixo de 960px ---------- */
nav.main a { white-space: nowrap; }
@media (max-width: 960px) { nav.main { display: none; } }

/* ---------- Órbita proporcional à coluna ----------
   As etiquetas agora são posicionadas em % do palco (cos/sin do ângulo),
   então tudo encolhe junto com a coluna. Por faixa:
   - >= 1280px: diagonais (±40° / 140° / 220°), etiquetas oscilando ±12°
   - 861–1279px: diagonais, paradas, hero em 2 colunas iguais
   - <= 860px: paradas, como na v2.1 */
.orbit { width: 100%; }
.orbit-stage { --r: 40%; width: min(460px, 100%); height: auto; aspect-ratio: 1 / 1; }
.orbit-labels li,
.orbit-labels li[style] {
  transform: none !important;
  left: calc(50% + cos(var(--a)) * var(--r));
  top: calc(50% + sin(var(--a)) * var(--r));
}

@media (min-width: 861px) and (max-width: 1279px) {
  /* colunas iguais: a órbita ganha espaço (390px em 880, 457px em 1024) e as
     etiquetas ficam paradas nas diagonais, sem encostar umas nas outras */
  .hero .wrap { grid-template-columns: 1fr 1fr; }
  .orbit-labels span { font-size: 12px; padding: 7px 10px; }
}
/* >= 1280px: as etiquetas não dão mais a volta completa (numa volta inteira elas
   invadiam a coluna do texto e a borda da tela). Agora oscilam ±12° em torno da
   posição, enquanto o arco coral segue girando: continua vivo e nunca corta. */
@media (prefers-reduced-motion: no-preference) and (min-width: 1280px) {
  .orbit-labels { animation: sway 9s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate !important; }
  .orbit-labels span { animation: sway-back 9s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate !important; }
}
@media (max-width: 1279px) { .orbit-labels, .orbit-labels span { animation: none !important; } }
@keyframes sway { from { rotate: -12deg; } to { rotate: 12deg; } }
@keyframes sway-back { from { rotate: 12deg; } to { rotate: -12deg; } }
@media (max-width: 860px) {
  .orbit-stage { --r: 36%; width: min(320px, 100%); }
}