/* Case Tré: assistente de IA em 3D */
.tre-sec { padding-top: 0; }
.tre-palco { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--raio); overflow: hidden; border: 1px solid var(--borda); background: #05070f; box-shadow: 0 0 40px rgba(0, 212, 255, 0.15); }
.tre-palco canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tre-cena-wrap { position: relative; }
.tre-chat { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: min(620px, calc(100% - 48px)); display: flex; gap: 8px; padding: 6px; border-radius: 999px; background: rgba(5, 10, 24, 0.72); border: 1px solid rgba(0, 212, 255, 0.45); box-shadow: 0 0 24px rgba(0, 212, 255, 0.25); backdrop-filter: blur(6px); }
.tre-chat input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--texto); font: 400 16px var(--fonte); padding: 10px 16px; outline: none; }
.tre-chat input::placeholder { color: rgba(220, 235, 255, 0.6); }
.tre-chat:focus-within { border-color: var(--ciano); }
.tre-chat .btn { padding: 10px 20px; border-radius: 999px; }
.tre-chat.esperando .btn { opacity: 0.5; pointer-events: none; }
.tre-mic { flex: none; width: 42px; height: 42px; align-self: center; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(0, 212, 255, 0.5); background: transparent; color: var(--ciano); cursor: pointer; }
.tre-mic[hidden] { display: none; }
.tre-mic:hover, .tre-mic:focus-visible { background: rgba(0, 212, 255, 0.12); outline: none; }
.tre-mic.ouvindo { color: #fff; background: #ff2d55; border-color: #ff2d55; animation: tre-ouvindo 1s ease-in-out infinite; }
@keyframes tre-ouvindo { 50% { box-shadow: 0 0 0 8px rgba(255, 45, 85, 0.25); } }
@media (prefers-reduced-motion: reduce) { .tre-mic.ouvindo { animation: none; } }
.tre-botoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; justify-content: center; }
.tre-botoes #voz[aria-pressed="true"] { background: transparent; border: 1px solid var(--ciano); color: var(--ciano); box-shadow: none; }
.tre-dicas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px; }
.tre-dicas div { background: var(--card); border: 1px solid var(--borda); border-radius: var(--raio); padding: 20px; }
.tre-dicas h3 { font: 500 18px var(--fonte-titulo); margin-bottom: 8px; color: var(--ciano); }
.tre-dicas p { color: var(--muted); font-size: 15px; }
.tre-aviso { margin-top: 20px; text-align: center; color: var(--muted); font-size: 14px; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 760px) {
  .tre-dicas { grid-template-columns: 1fr; }
  /* no celular a cena é pequena: o campo fica abaixo dela */
  .tre-chat { position: static; transform: none; width: 100%; margin-top: 12px; }
  /* o balão fica pequeno demais no celular: a resposta aparece também em texto abaixo da cena */
  #fala { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; margin-top: 12px; padding: 14px 16px; background: var(--card); border: 1px solid rgba(0, 212, 255, 0.35); border-radius: var(--raio); color: var(--texto); font-size: 15px; }
  #fala:empty { display: none; }
}