/* Página de um robô só (robo.html). Usa as cores, o logo e a faixa do style.css. */
body.pagina-robo { overflow: auto; min-height: 100svh; background: #000; }
@media (hover: hover) and (pointer: fine) { html, body.pagina-robo { cursor: auto; } body.pagina-robo a { cursor: pointer; } }

.robo-topo {
  position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: 72px; padding: 0 32px; background: rgba(0,0,0,.85); backdrop-filter: blur(8px); font-size: .875rem;
}
.robo-topo__voltar { justify-self: start; padding: 8px 14px; border-radius: 999px; background: var(--vidro); transition: background-color .18s, color .18s; }
.robo-topo__voltar:hover { background: var(--papel); color: var(--tinta); }
.robo-topo__logo .marca { width: 96px; height: 52px; }
.robo-topo__passa { justify-self: end; display: flex; gap: 6px; }
.robo-topo__passa a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--vidro); font-size: 1.4rem; transition: background-color .18s, color .18s; }
.robo-topo__passa a:hover { background: var(--destaque); color: #101013; }
.robo-topo a:focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; }

.robo {
  display: grid; grid-template-columns: 1fr 1.1fr; align-items: stretch;
  width: min(1180px, calc(100vw - 64px)); margin: 32px auto 140px;
  background: #101013; border: 1px solid rgba(250,250,250,.16); border-radius: 14px; overflow: hidden;
  animation: roboEntra .4s ease;
}
@keyframes roboEntra { from { opacity: 0; transform: translateY(18px); } }
.robo__arte { background: var(--cor-robo, #101013); display: grid; place-items: center; }
.robo__arte img { display: block; width: 100%; height: 100%; object-fit: contain; aspect-ratio: 1; }
.robo__texto { padding: 48px 44px 40px; display: flex; flex-direction: column; gap: 12px; }
.robo__categoria { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--lima); }
.robo h1 { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 600; line-height: 1.02; letter-spacing: -.015em; }
.robo__necessidade { font-size: 1.1875rem; color: var(--apagado); margin-bottom: 10px; }
.robo h2 { margin-top: 10px; font-size: .75rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--apagado); }
.robo p, .robo li { font-size: 1rem; line-height: 1.5; }
.robo ol { padding-left: 20px; display: grid; gap: 6px; }
.robo li::marker { color: var(--destaque); font-weight: 600; }
.robo__preco { margin-top: 14px; padding-top: 16px; border-top: 1px solid rgba(250,250,250,.15); display: flex; justify-content: space-between; align-items: baseline; }
.robo__preco span { font-size: .8125rem; color: var(--apagado); }
.robo__preco strong { font-size: 1.75rem; font-weight: 600; }
.robo .robo__aviso { font-size: .8125rem; color: var(--apagado); }

@media (max-width: 809.98px) {
  .robo-topo { padding: 0 16px; height: 60px; }
  .robo-topo__logo .marca { width: 64px; height: 36px; }
  .robo { grid-template-columns: 1fr; width: calc(100vw - 24px); margin: 12px auto 110px; }
  .robo__arte img { aspect-ratio: 4 / 3; }
  .robo__texto { padding: 24px 20px 22px; }
}
@media (prefers-reduced-motion: reduce) { .robo { animation: none; } }

.robo__pedido { margin-top: 6px; display: block; text-align: center; padding: 16px 20px; border-radius: 999px; background: var(--destaque); color: #101013; font-weight: 600; font-size: 1.0625rem; transition: background-color .18s; }
.robo__pedido:hover { background: var(--lima); }
.robo__pedido:focus-visible { outline: 2px solid var(--papel); outline-offset: 3px; }
.robo__pedido[hidden], .robo__aviso[hidden], .topo__pedido[hidden] { display: none; }