/* =====================================================
   PLAY TVI — Cena de ambiente do hero (agosto/2026)
   TV horizontal na parede + TV vertical + totem,
   cada um exibindo conteúdo real de sinalização.
   Complementa style.css. Não altera regra existente.
   ===================================================== */

/* ---------- Palco ---------- */
.hero-scene {
  position: relative;
  animation: fadeInUp 0.9s ease-out 0.15s backwards;
}

.scene-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}

/* ---------- Ambiente: parede, luz e piso ---------- */
.scene-room {
  position: absolute;
  inset: 0;
  background:
    /* luz quente vinda de cima à direita */
    radial-gradient(120% 85% at 80% -12%, rgba(255, 220, 178, .42) 0%, transparent 58%),
    /* luz de apoio à esquerda, mais fria */
    radial-gradient(80% 70% at 8% 20%, rgba(150, 160, 220, .12) 0%, transparent 60%),
    /* vinheta nos cantos */
    radial-gradient(130% 120% at 50% 42%, transparent 42%, rgba(0, 0, 0, .5) 100%),
    linear-gradient(180deg, #52432f 0%, #40352a 40%, #372d24 58%, #241d18 58.5%, #171210 100%);
}

/* ripado de madeira da parede + rodapé */
.scene-room::before {
  content: '';
  position: absolute;
  inset: 0 0 42% 0;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, .10) 0px,
      rgba(255, 255, 255, .10) 1px,
      rgba(0, 0, 0, .16) 1px,
      rgba(0, 0, 0, .16) 3px,
      transparent 3px,
      transparent 30px
    ),
    /* rodapé colado na linha do piso */
    linear-gradient(180deg, transparent calc(100% - 8px), rgba(255, 255, 255, .10) calc(100% - 8px), rgba(0, 0, 0, .45) 100%);
}

/* piso em perspectiva, com tábuas convergindo para o fundo */
.scene-room::after {
  content: '';
  position: absolute;
  left: -40%;
  right: -40%;
  top: 58%;
  bottom: -14%;
  transform: perspective(300px) rotateX(57deg);
  transform-origin: top center;
  background:
    /* poça de luz vinda da parede */
    radial-gradient(55% 60% at 68% 0%, rgba(255, 214, 165, .30) 0%, transparent 68%),
    /* tábuas */
    repeating-linear-gradient(
      90deg,
      rgba(0, 0, 0, .30) 0px,
      rgba(0, 0, 0, .30) 2px,
      transparent 2px,
      transparent 62px
    ),
    linear-gradient(180deg, #4a3c2e 0%, #33291f 45%, #1d1712 100%);
}

/* planta em primeiro plano (silhueta) */
.scene-plant {
  position: absolute;
  left: 1.5%;
  bottom: 0;
  width: 18%;
  height: 40%;
  z-index: 4;
  pointer-events: none;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .5));
}

/* ---------- Aparelhos ---------- */
.dev {
  position: absolute;
  background: #0a0a0f;
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow:
    0 24px 55px rgba(0, 0, 0, .6),
    0 0 0 1px rgba(0, 0, 0, .5) inset;
}

.dev-screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  container-type: size;
}

/* brilho de vidro por cima da tela */
.dev-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(148deg, rgba(255, 255, 255, .14) 0%, transparent 38%);
}

/* TV horizontal, montada na parede */
.dev--tvh {
  left: 6%;
  top: 12%;
  width: 47%;
  aspect-ratio: 16 / 9;
  padding: 5px;
  border-radius: 7px;
  z-index: 2;
}

/* TV vertical, montada na parede */
.dev--tvv {
  right: 29%;
  top: 9%;
  width: 15%;
  aspect-ratio: 9 / 16;
  padding: 4px;
  border-radius: 6px;
  z-index: 2;
}

/* Totem de chão — maior e mais à frente que as TVs de parede */
.dev--totem {
  right: 6%;
  top: 13%;
  width: 22%;
  aspect-ratio: 10 / 21;
  padding: 7px 6px 5.5%;
  border-radius: 14px;
  z-index: 3;
  background: linear-gradient(180deg, #14141c 0%, #0a0a0f 55%, #17171f 100%);
}

/* faixa da marca no pé do totem */
.dev--totem::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 1.6%;
  transform: translateX(-50%);
  width: 34%;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .22);
}

/* sombra projetada do totem no piso */
.dev--totem::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -4%;
  transform: translateX(-50%);
  width: 150%;
  height: 9%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .8) 0%, transparent 70%);
  z-index: -1;
}

/* telas estreitas precisam de texto proporcionalmente maior para ficar legível */
.dev--tvv .scn,
.dev--totem .scn { font-size: 16px; font-size: 7.4cqw; }

/* haste de fixação das TVs na parede */
.dev--tvh::before,
.dev--tvv::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  width: 22%;
  height: 6px;
  background: linear-gradient(180deg, #1a1a22, #0c0c11);
  border-radius: 0 0 3px 3px;
}

/* ---------- Conteúdo exibido nas telas ---------- */
.scn {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .7s ease;
  font-size: 12px;              /* fallback */
  font-size: 4.2cqw;            /* escala com o tamanho da tela */
  line-height: 1.15;
  color: #fff;
}
.scn.is-active { opacity: 1; visibility: visible; }

/* ---- Layout multizona da TV horizontal ---- */
.lay-h {
  display: grid;
  grid-template-columns: 1fr 31%;
  grid-template-rows: 1fr auto;
  height: 100%;
  gap: 0;
}

.zone-main {
  grid-area: 1 / 1 / 2 / 2;
  padding: 1.1em 1.2em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .35em;
  position: relative;
  overflow: hidden;
}

.zone-side {
  grid-area: 1 / 2 / 2 / 3;
  padding: .9em .7em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3em;
  text-align: center;
  background: rgba(0, 0, 0, .34);
  backdrop-filter: blur(2px);
  border-left: 1px solid rgba(255, 255, 255, .12);
}

.zone-ticker {
  grid-area: 2 / 1 / 3 / 3;
  background: rgba(0, 0, 0, .62);
  border-top: 1px solid rgba(255, 255, 255, .1);
  overflow: hidden;
  white-space: nowrap;
  padding: .42em 0;
  font-size: .72em;
  letter-spacing: .01em;
}

.ticker-track {
  display: inline-block;
  white-space: nowrap;
  animation: heroTicker 22s linear infinite;
  will-change: transform;
}
.ticker-track span { padding: 0 1.6em; opacity: .92; }
.ticker-track b { color: var(--accent, #f59e0b); font-weight: 700; }

@keyframes heroTicker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* tipografia das artes */
.scn-kicker {
  font-size: .68em;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .85;
}
.scn-title {
  font-family: var(--font-display);
  font-size: 1.75em;
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.scn-sub { font-size: .8em; opacity: .88; }

.scn-price {
  font-family: var(--font-display);
  font-size: 2.5em;
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.03em;
}
.scn-price small { font-size: .38em; font-weight: 600; opacity: .8; }

.scn-pill {
  align-self: flex-start;
  font-size: .62em;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .35em .8em;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .25);
}

/* widget de clima na zona lateral */
.wx-icon { font-size: 2em; line-height: 1; }
.wx-temp {
  font-family: var(--font-display);
  font-size: 1.7em;
  font-weight: 800;
  line-height: 1;
}
.wx-city { font-size: .68em; opacity: .85; }
.wx-desc { font-size: .6em; opacity: .7; }

/* ---- Artes de tela cheia (vertical e totem) ---- */
.lay-v {
  height: 100%;
  padding: 1.1em .95em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  gap: .5em;
}
.lay-v .scn-title { font-size: 1.35em; }
.lay-v .scn-price { font-size: 2em; }
.lay-v .scn-pill { align-self: center; }

.scn-logo {
  font-size: .62em;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .75;
}

.scn-badge {
  margin: 0 auto;
  width: 4.6em;
  height: 4.6em;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .9em;
  line-height: .95;
  color: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}

/* ---- Paletas por cenário ---- */
.bg-varejo      { background: linear-gradient(145deg, #7f1d3f 0%, #c026d3 55%, #6d28d9 100%); }
.bg-varejo-alt  { background: linear-gradient(160deg, #1e1b4b 0%, #4c1d95 60%, #7e22ce 100%); }
.bg-restaurante { background: linear-gradient(145deg, #7c2d12 0%, #b45309 55%, #a16207 100%); }
.bg-restaurante-alt { background: linear-gradient(160deg, #1c1917 0%, #7c2d12 65%, #c2410c 100%); }
.bg-clinica     { background: linear-gradient(145deg, #064e3b 0%, #0d9488 55%, #0284c7 100%); }
.bg-clinica-alt { background: linear-gradient(160deg, #0f172a 0%, #075985 60%, #0d9488 100%); }

.badge-varejo      { background: #f59e0b; color: #1c1917; }
.badge-restaurante { background: #fbbf24; color: #1c1917; }
.badge-clinica     { background: #34d399; color: #052e26; }

/* ---------- Legenda do cenário ---------- */
.scene-caption {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 4.5%;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .5rem .95rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  color: #fff;
  background: rgba(10, 10, 16, .68);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-md);
}
.scene-caption .live-dot-mini {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, .6);
  animation: heroPulse 2s infinite;
}
@keyframes heroPulse {
  70%  { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
.scene-caption .cap-sep { opacity: .35; }
.scene-caption .cap-seg { color: var(--primary-light); }

/* ---------- Etiquetas apontando os aparelhos ---------- */
.scene-tag {
  position: absolute;
  z-index: 6;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: #fff;
  background: rgba(10, 10, 16, .72);
  border: 1px solid rgba(255, 255, 255, .13);
  padding: .28rem .6rem;
  border-radius: 999px;
  white-space: nowrap;
  backdrop-filter: blur(8px);
}
.tag-tvh   { left: 6%;   top: 3.5%; }
.tag-tvv   { right: 29%; top: 1.5%; }
.tag-totem { right: 8%;  bottom: 6%; }

/* ---------- Cartões flutuantes de prova ---------- */
.hero-scene .floating-card { z-index: 7; }

/* ---------- Responsivo ---------- */
/* ---------- Sangramento até a borda direita da viewport ----------
   O .container tem max-width 1280px e padding lateral de 1.5rem, ou seja
   a metade útil vale 640 - 24 = 616px. Para a cena encostar na borda da
   tela, ela precisa avançar (50vw - 616px) além da própria coluna.
   O min() garante que em telas entre 1200 e 1280px o avanço seja apenas
   o padding do container, já que ali não existe folga sobrando.        */
@media (min-width: 1200px) {
  .hero-scene { margin-right: min(-1.5rem, calc(616px - 50vw)); }
  .scene-stage {
    aspect-ratio: 16 / 9.4;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  }
}

@media (max-width: 1024px) {
  /* `width: 100%` é obrigatório: só com `max-width` + margens auto o item
     do grid encolhe para 0 e a cena desaparece. */
  .hero-scene {
    width: 100%;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    order: 2;
  }
  .scene-tag { display: none; }
}

@media (max-width: 640px) {
  .scene-stage { aspect-ratio: 5 / 4; }
  .scene-caption { font-size: .72rem; padding: .4rem .7rem; bottom: 4%; }
  .scene-plant { display: none; }
  /* no celular a cena fica mais legível com os aparelhos um pouco maiores */
  .dev--tvh { left: 4%; top: 13%; width: 52%; }
  .dev--tvv { right: 26%; top: 9%; width: 18%; }
  .dev--totem { right: 3%; top: 17%; width: 20%; }
}

@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
  .scn { transition: none; }
  .scene-caption .live-dot-mini { animation: none; }
}