/* O Grupo do Prédio · site oficial
   Paleta tirada das imagens da série: noite azul-petróleo, carvão, a luz fria das telas e um único vermelho.
   Tipos: Barlow Condensed (no lugar da DIN Condensed dos cartões), Barlow e JetBrains Mono. */

:root {
  --noite: #070b0e;
  --carvao: #0e151a;
  --chumbo: #16212a;
  --petroleo: #1d3340;
  --tela: #8fc9ee;
  --tela-fraca: rgba(143, 201, 238, .16);
  --texto: #dce6ec;
  --apagado: #8a9aa5;
  --vermelho: #d23c3c;
  --vermelho-fraco: rgba(210, 60, 60, .18);
  --borda: rgba(220, 230, 236, .12);
  --f-titulo: "Barlow Condensed", "DIN Condensed", "Arial Narrow", sans-serif;
  --f-texto: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --margem: clamp(16px, 5vw, 72px);
  --largura: 1200px;
  --sombra-texto: 0 2px 18px rgba(0, 0, 0, .75);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--noite);
  color: var(--texto);
  font: 400 clamp(16px, 1.05vw + 12px, 19px)/1.6 var(--f-texto);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--vermelho); color: #fff; }
:focus-visible { outline: 2px solid var(--tela); outline-offset: 3px; border-radius: 2px; }

.pular { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--texto); color: var(--noite); padding: 10px 14px; border-radius: 6px; font-weight: 600; text-decoration: none; transition: top .2s; }
.pular:focus { top: 12px; }

/* granulado de filme, a tela inteira, sempre por cima */
.granulado {
  position: fixed; inset: -50%; z-index: 90; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  opacity: .07; mix-blend-mode: overlay;
  animation: grao 1.2s steps(6) infinite;
}
@keyframes grao {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}

/* ---------- topo ---------- */
.topo {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: flex; align-items: center; gap: 24px;
  padding: 14px var(--margem);
  transition: background .4s, backdrop-filter .4s, border-color .4s;
  border-bottom: 1px solid transparent;
}
.topo.solido { background: rgba(7, 11, 14, .78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-color: var(--borda); }
.marca { font: 700 20px/1 var(--f-titulo); letter-spacing: .06em; text-decoration: none; white-space: nowrap; }
.menu { display: flex; gap: 22px; margin-left: auto; }
.menu a { font: 500 15px/1 var(--f-titulo); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--apagado); transition: color .2s; }
.menu a:hover { color: var(--texto); }
.som {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: transparent; color: var(--apagado); border: 1px solid var(--borda); border-radius: 999px;
  padding: 7px 12px; font: 500 13px/1 var(--f-mono); text-transform: lowercase; transition: color .2s, border-color .2s;
}
.som:hover, .som[aria-pressed="true"] { color: var(--texto); border-color: rgba(220, 230, 236, .35); }
.som-barras { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.som-barras i { width: 2px; height: 3px; background: currentColor; border-radius: 1px; }
.som[aria-pressed="true"] .som-barras i { animation: barra .9s ease-in-out infinite; }
.som[aria-pressed="true"] .som-barras i:nth-child(2) { animation-delay: -.3s; }
.som[aria-pressed="true"] .som-barras i:nth-child(3) { animation-delay: -.6s; }
.som[aria-pressed="true"] .som-barras i:nth-child(4) { animation-delay: -.15s; }
@keyframes barra { 0%, 100% { height: 3px; } 50% { height: 12px; } }

/* ---------- comuns ---------- */
section { position: relative; }
.selo { font: 500 13px/1 var(--f-mono); letter-spacing: .22em; color: var(--tela); margin: 0 0 18px; text-transform: uppercase; }
h1, h2, h3 { font-family: var(--f-titulo); font-weight: 700; line-height: .95; margin: 0; letter-spacing: .01em; }
h2 { font-size: clamp(40px, 5.4vw, 84px); text-transform: uppercase; margin-bottom: 20px; text-wrap: balance; }
.grande { font: 600 clamp(22px, 2vw, 30px)/1.25 var(--f-titulo); letter-spacing: .02em; color: var(--texto); margin: 0 0 18px; }
.nota { font: 400 13px/1.5 var(--f-mono); color: var(--apagado); margin-top: 26px; }
.cabeca { max-width: 720px; }
.cabeca p:not(.selo) { color: var(--apagado); }

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 22px; border: 1px solid rgba(220, 230, 236, .32); border-radius: 999px;
  font: 600 15px/1 var(--f-titulo); letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  transition: background .25s, color .25s, border-color .25s, transform .25s var(--ease);
}
.botao:hover { border-color: var(--texto); transform: translateY(-2px); }
.botao-cheio { background: var(--texto); color: var(--noite); border-color: var(--texto); }
.botao-cheio:hover { background: #fff; }

/* revelação na rolagem */
.revelar { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.revelar.visivel { opacity: 1; transform: none; }

/* ---------- 1. abertura ---------- */
.abertura {
  min-height: 100svh; display: grid; align-items: end;
  padding: 120px var(--margem) clamp(56px, 9vh, 110px);
  overflow: hidden; isolation: isolate;
}
.abertura-fundo { position: absolute; inset: 0; z-index: -3; }
.abertura-fundo img {
  width: 100%; height: 118%; object-fit: cover; object-position: 50% 30%;
  transform: translate3d(0, var(--desloc, 0px), 0) scale(1.06);
  animation: aproximar 24s var(--ease) both;
  will-change: transform;
}
@keyframes aproximar { from { scale: 1.12; filter: brightness(.4); } to { scale: 1; filter: brightness(1); } }
.abertura::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(120% 80% at 50% 20%, transparent 0 35%, rgba(7, 11, 14, .55) 70%, rgba(7, 11, 14, .95) 100%),
    linear-gradient(to top, var(--noite) 0, rgba(7, 11, 14, .65) 32%, rgba(7, 11, 14, .1) 60%, rgba(7, 11, 14, .5) 100%);
}
.chuva { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; opacity: .55; }
/* a lanterna: escurece tudo menos um círculo que segue o ponteiro (só com mouse) */
.lanterna {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .8s;
  background: radial-gradient(circle 260px at var(--mx, 50%) var(--my, 40%), transparent 0, rgba(7, 11, 14, .55) 100%);
}
@media (hover: hover) and (pointer: fine) { .abertura:hover .lanterna { opacity: 1; } }

.abertura-texto { max-width: 980px; }
.titulo {
  font-size: clamp(64px, 12.5vw, 196px); font-weight: 800; letter-spacing: -.005em; line-height: .86;
  text-shadow: var(--sombra-texto); margin-bottom: 26px;
}
.titulo .letra {
  display: inline-block; opacity: 0; filter: blur(12px); transform: translateY(.18em);
  animation: letra 1.1s var(--ease) forwards; animation-delay: calc(.35s + var(--i) * 45ms);
}
.titulo .palavra { display: inline-block; white-space: nowrap; }
@keyframes letra { to { opacity: 1; filter: blur(0); transform: none; } }
/* uma letra pisca de vez em quando, como lâmpada fraca */
.titulo .letra.piscar { animation: letra 1.1s var(--ease) forwards, falha 7s 3s steps(1) infinite; }
@keyframes falha { 0%, 92%, 95%, 100% { opacity: 1; } 93%, 96% { opacity: .15; } }

.lide { font: 500 clamp(20px, 2.1vw, 30px)/1.3 var(--f-titulo); letter-spacing: .02em; max-width: 30ch; text-shadow: var(--sombra-texto); margin: 0 0 34px; opacity: 0; animation: surgir 1.2s 1.4s var(--ease) forwards; }
.lide span { color: var(--apagado); }
@keyframes surgir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.proximo {
  display: inline-grid; gap: 8px; padding: 18px 22px 16px; margin-bottom: 30px;
  background: rgba(7, 11, 14, .55); border: 1px solid var(--borda); border-left: 2px solid var(--vermelho);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; animation: surgir 1.2s 1.8s var(--ease) forwards;
}
.proximo-rotulo { margin: 0; font: 500 12px/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--vermelho); }
.proximo-rotulo::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--vermelho); margin-right: 9px; vertical-align: 1px; animation: pulso 1.6s ease-in-out infinite; }
@keyframes pulso { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.proximo-quando { margin: 0; font: 600 22px/1.1 var(--f-titulo); letter-spacing: .04em; text-transform: uppercase; }
.proximo-relogio { display: flex; gap: 18px; margin: 4px 0 0; font-family: var(--f-mono); }
.proximo-relogio span { display: grid; gap: 4px; min-width: 2.6ch; }
.proximo-relogio b { font-size: clamp(26px, 2.6vw, 34px); font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.proximo-relogio small { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--apagado); }
.proximo.agora .proximo-relogio { display: none; }

.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; opacity: 0; animation: surgir 1.2s 2.1s var(--ease) forwards; }
.redes { display: flex; gap: 10px; }
.redes a { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(220, 230, 236, .28); border-radius: 50%; transition: border-color .2s, background .2s, transform .25s var(--ease); }
.redes a:hover { border-color: var(--texto); background: rgba(220, 230, 236, .06); transform: translateY(-2px); }
.redes svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.redes svg .cheio { fill: currentColor; stroke: none; }

.descer { position: absolute; left: 50%; bottom: 22px; width: 24px; height: 40px; margin-left: -12px; border: 1px solid rgba(220, 230, 236, .35); border-radius: 12px; opacity: 0; animation: surgir 1s 2.6s forwards; }
.descer span { position: absolute; left: 50%; top: 8px; width: 2px; height: 8px; margin-left: -1px; background: var(--texto); border-radius: 1px; animation: rolar 1.8s ease-in-out infinite; }
@keyframes rolar { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }

/* ---------- 2. o grupo ---------- */
.grupo {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: clamp(32px, 6vw, 96px); align-items: center;
  max-width: calc(var(--largura) + 2 * var(--margem)); margin: 0 auto;
  padding: clamp(96px, 14vw, 180px) var(--margem);
  isolation: isolate;
}
.grupo-fundo { position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; overflow: hidden; }
.grupo-fundo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; opacity: .32; filter: saturate(.8); }
.grupo-fundo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--noite) 15%, rgba(7, 11, 14, .7) 55%, rgba(7, 11, 14, .55)), linear-gradient(to bottom, var(--noite), transparent 20%, transparent 80%, var(--noite)); }
.grupo-texto p:not(.selo):not(.grande):not(.nota) { color: #b9c7d0; max-width: 46ch; }

/* aparelho genérico: nada de marca de aplicativo de verdade */
.aparelho {
  justify-self: center; width: min(100%, 380px, calc(84svh * 9 / 18.5)); aspect-ratio: 9 / 18.5;
  padding: 12px; border-radius: 42px;
  background: linear-gradient(160deg, #1b252d, #0b1014);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 40px 120px rgba(0, 0, 0, .7), 0 0 90px var(--tela-fraca);
  transition-delay: .15s;
}
.aparelho-tela { height: 100%; border-radius: 32px; overflow: hidden; display: flex; flex-direction: column; background: #0b1217; position: relative; }
.aparelho-tela::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, .018) 0 1px, transparent 1px 3px); }
.conversa-topo { display: flex; align-items: center; gap: 12px; padding: 22px 18px 14px; background: #111b22; border-bottom: 1px solid var(--borda); }
.conversa-avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--petroleo); font: 700 13px/1 var(--f-titulo); letter-spacing: .08em; color: var(--tela); }
.conversa-nome { margin: 0; font: 600 16px/1.2 var(--f-texto); }
.conversa-membros { margin: 2px 0 0; font: 400 12px/1.2 var(--f-mono); color: var(--apagado); }
.conversa-membros.mudou #membros { color: var(--vermelho); animation: falha 1.2s steps(1) 2; }
.conversa { list-style: none; margin: 0; padding: 16px 14px 18px; display: flex; flex-direction: column; gap: 9px; overflow: hidden; flex: 1; justify-content: flex-end; }
.msg { max-width: 86%; padding: 8px 11px 6px; border-radius: 14px 14px 14px 4px; background: #17232c; font-size: 14.5px; line-height: 1.38; animation: msg .45s var(--ease) both; }
.msg-nome { display: block; font: 600 12px/1.2 var(--f-texto); margin-bottom: 2px; }
.msg-hora { display: block; text-align: right; font: 400 10px/1 var(--f-mono); color: var(--apagado); margin-top: 3px; }
.msg-r { background: #1d1214; border: 1px solid var(--vermelho-fraco); }
.msg-r .msg-nome { color: var(--vermelho); }
.msg-r .msg-texto { font: 600 15px/1.35 var(--f-texto); letter-spacing: .02em; }
.tarja { background: var(--texto); color: transparent; border-radius: 2px; user-select: none; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.msg-r .msg-depois { display: block; margin-top: 6px; font: 400 11px/1.3 var(--f-mono); color: var(--apagado); }
.msg-sistema { align-self: center; max-width: 92%; background: rgba(143, 201, 238, .08); color: var(--apagado); font: 400 12px/1.4 var(--f-mono); text-align: center; border-radius: 8px; padding: 6px 10px; }
.msg-digitando { display: inline-flex; gap: 4px; padding: 11px 13px; }
.msg-digitando i { width: 6px; height: 6px; border-radius: 50%; background: var(--apagado); animation: ponto 1.2s ease-in-out infinite; }
.msg-digitando i:nth-child(2) { animation-delay: .15s; } .msg-digitando i:nth-child(3) { animation-delay: .3s; }
@keyframes ponto { 0%, 60%, 100% { transform: none; opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes msg { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---------- 3. avisos ---------- */
.avisos { max-width: calc(var(--largura) + 2 * var(--margem)); margin: 0 auto; padding: clamp(80px, 11vw, 150px) var(--margem); }
.grade-avisos { list-style: none; margin: 46px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 18px; }
.aviso {
  position: relative; aspect-ratio: 9 / 16; border-radius: 10px; overflow: hidden; background: var(--carvao);
  border: 1px solid var(--borda); isolation: isolate;
  transition: transform .5s var(--ease), border-color .3s, box-shadow .5s var(--ease);
}
.aviso img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease), filter .6s; }
.aviso::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(7, 11, 14, .96) 8%, rgba(7, 11, 14, .25) 55%, rgba(7, 11, 14, .55)); }
.aviso-corpo { position: absolute; inset: auto 0 0; padding: 16px; }
.aviso-num { font: 500 12px/1 var(--f-mono); letter-spacing: .18em; color: var(--tela); }
.aviso-titulo { font: 700 26px/1 var(--f-titulo); text-transform: uppercase; margin: 8px 0 8px; letter-spacing: .01em; }
.aviso-data { font: 400 12px/1.3 var(--f-mono); color: var(--apagado); }
.aviso-estado { position: absolute; top: 12px; left: 12px; font: 500 10px/1 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; padding: 6px 8px; border-radius: 4px; background: rgba(7, 11, 14, .7); border: 1px solid var(--borda); color: var(--apagado); }
.aviso-trancado img { filter: blur(10px) brightness(.7) saturate(.85); transform: scale(1.15); }
.aviso-trancado .aviso-titulo .tarja { display: inline-block; height: .8em; vertical-align: -.05em; }
.aviso-trancado .cadeado { position: absolute; top: 38%; left: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; opacity: .55; }
.aviso-hoje { border-color: var(--vermelho); box-shadow: 0 0 0 1px var(--vermelho), 0 0 40px var(--vermelho-fraco); }
.aviso-hoje .aviso-estado { color: #fff; background: var(--vermelho); border-color: var(--vermelho); }
.aviso-aberto { cursor: pointer; }
.aviso-aberto .aviso-estado { color: var(--noite); background: var(--tela); border-color: var(--tela); }
.aviso-aberto:hover { transform: translateY(-6px); border-color: rgba(220, 230, 236, .35); box-shadow: 0 30px 60px rgba(0, 0, 0, .55); }
.aviso-aberto:hover img { transform: scale(1.06); }
.aviso-regra { margin: 10px 0 0; font: 600 13px/1.35 var(--f-texto); color: #f0c9c9; }
.aviso a.cobrir { position: absolute; inset: 0; z-index: 2; }

/* ---------- 4. corredor ---------- */
.corredor { min-height: 92svh; display: grid; align-items: center; padding: clamp(80px, 12vw, 140px) var(--margem); overflow: hidden; isolation: isolate; }
.corredor-fotos { position: absolute; inset: 0; z-index: -2; }
.corredor-fotos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; transition: filter .25s; }
.corredor[data-luz="apagada"] .corredor-fotos img { filter: brightness(.16) saturate(.5); }
.corredor.piscando .corredor-fotos img { animation: lampada 1.4s steps(1) both; }
@keyframes lampada { 0% { filter: brightness(.16); } 12% { filter: brightness(1); } 18% { filter: brightness(.2); } 30% { filter: brightness(1); } 34% { filter: brightness(.4); } 46%, 100% { filter: brightness(1); } }
.corredor::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(7, 11, 14, .92) 0, rgba(7, 11, 14, .55) 45%, rgba(7, 11, 14, .15)), linear-gradient(to bottom, var(--noite), transparent 18%, transparent 82%, var(--noite)); }
.corredor-texto { max-width: 620px; }
.corredor-texto h2 { font-size: clamp(34px, 4.4vw, 64px); }
.corredor-fala { font: 600 clamp(24px, 2.4vw, 34px)/1.2 var(--f-titulo); color: var(--apagado); letter-spacing: .03em; min-height: 1.3em; margin: 0 0 30px; transition: color .4s; }
.corredor[data-luz="apagada"] .corredor-fala { color: var(--vermelho); }
.interruptor { display: inline-flex; align-items: center; gap: 14px; cursor: pointer; background: transparent; color: var(--texto); border: 0; padding: 0; font: 500 14px/1 var(--f-mono); letter-spacing: .12em; text-transform: lowercase; }
.interruptor-tecla { position: relative; width: 34px; height: 54px; border-radius: 6px; background: #d9d2c3; box-shadow: inset 0 0 0 2px #bdb4a2, 0 6px 20px rgba(0, 0, 0, .5); }
.interruptor-tecla::after { content: ""; position: absolute; left: 7px; right: 7px; top: 8px; height: 20px; border-radius: 3px; background: #f1ece2; box-shadow: 0 2px 0 #b5ab97; transition: top .15s var(--ease); }
.interruptor[aria-pressed="false"] .interruptor-tecla::after { top: 26px; box-shadow: 0 -2px 0 #b5ab97; }

/* ---------- 5. prédio ---------- */
.predio { padding: clamp(96px, 13vw, 170px) var(--margem) clamp(56px, 7vw, 90px); overflow: hidden; isolation: isolate; }
.predio-fundo { position: absolute; inset: 0; z-index: -1; }
.predio-fundo img { width: 100%; height: 120%; object-fit: cover; object-position: 50% 20%; opacity: .5; transform: translate3d(0, var(--desloc, 0px), 0); will-change: transform; }
.predio-fundo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--noite) 0, rgba(7, 11, 14, .55) 25%, rgba(7, 11, 14, .82) 70%, var(--noite) 100%); }
.predio-conteudo { max-width: var(--largura); margin: 0 auto; }
.fatos { list-style: none; display: flex; flex-wrap: wrap; gap: 14px 34px; margin: 6px 0 24px; padding: 0; }
.fatos li { display: grid; gap: 4px; }
.fatos b { font: 700 clamp(40px, 4.4vw, 60px)/.9 var(--f-titulo); }
.fatos span { font: 400 11px/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--apagado); }
.moradores { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.morador { padding: 20px 20px 18px; background: rgba(14, 21, 26, .78); border: 1px solid var(--borda); border-radius: 10px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: border-color .3s, transform .5s var(--ease), opacity 1s var(--ease); }
.morador:hover { border-color: rgba(143, 201, 238, .35); transform: translateY(-3px); }
.morador h3 { font-size: 26px; text-transform: uppercase; margin: 0 0 6px; }
.porta + h3 { margin-top: 14px; }
.morador p { margin: 0; font-size: 15px; color: var(--apagado); }
.porta { display: inline-block; padding: 5px 9px; border-radius: 4px; border: 1px solid rgba(201, 176, 120, .5); color: #d8c38f; font: 500 13px/1 var(--f-mono); letter-spacing: .1em; background: rgba(201, 176, 120, .06); }
.morador-voce { border-color: var(--vermelho-fraco); }
.morador-voce .porta { color: var(--vermelho); border-color: rgba(210, 60, 60, .55); background: var(--vermelho-fraco); }
.morador:nth-child(2) { transition-delay: .05s; } .morador:nth-child(3) { transition-delay: .1s; } .morador:nth-child(4) { transition-delay: .15s; }
.morador:nth-child(5) { transition-delay: .2s; } .morador:nth-child(6) { transition-delay: .25s; } .morador:nth-child(7) { transition-delay: .3s; }
.morador:nth-child(8) { transition-delay: .35s; } .morador:nth-child(9) { transition-delay: .4s; }

/* ---------- 6. teaser ---------- */
.teaser {
  display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: clamp(32px, 6vw, 90px); align-items: center;
  max-width: calc(var(--largura) + 2 * var(--margem)); margin: 0 auto; padding: clamp(56px, 7vw, 100px) var(--margem) clamp(96px, 13vw, 170px); isolation: isolate;
}
.teaser-fundo { position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; overflow: hidden; }
.teaser-fundo img { width: 100%; height: 100%; object-fit: cover; opacity: .28; }
.teaser-fundo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--noite), rgba(7, 11, 14, .6) 30%, rgba(7, 11, 14, .6) 70%, var(--noite)); }
.teaser-video { aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; background: #000; box-shadow: 0 40px 120px rgba(0, 0, 0, .7), 0 0 0 1px var(--borda); }
.tocar { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.tocar img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter .4s; }
.tocar:hover img { transform: scale(1.04); filter: brightness(1.1); }
.tocar-icone { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: rgba(7, 11, 14, .55); border: 1px solid rgba(255, 255, 255, .5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: transform .3s var(--ease), background .3s; }
.tocar-icone::after { content: ""; position: absolute; left: 31px; top: 25px; border: 13px solid transparent; border-left: 20px solid #fff; border-right: 0; }
.tocar:hover .tocar-icone { transform: scale(1.08); background: var(--vermelho); border-color: var(--vermelho); }
.teaser-video iframe { width: 100%; height: 100%; border: 0; display: block; }
.teaser-texto p:not(.selo) { color: #b9c7d0; }
.estreia { font: 500 14px/1.5 var(--f-mono); letter-spacing: .06em; margin: 22px 0 28px; }
.estreia b { color: var(--texto); font-weight: 500; }
.teaser .acoes { opacity: 1; animation: none; }

/* ---------- rodapé ---------- */
.rodape { padding: 80px var(--margem) 60px; text-align: center; border-top: 1px solid var(--borda); color: var(--apagado); font-size: 15px; }
.rodape p { margin: 0 0 10px; }
.rodape-marca { font: 700 32px/1 var(--f-titulo); letter-spacing: .06em; color: var(--texto); margin-bottom: 16px !important; }
.rodape-aviso { max-width: 60ch; margin: 18px auto 18px !important; font-size: 13px; }
.rodape-redes a { color: var(--texto); text-decoration: none; border-bottom: 1px solid var(--borda); }
.rodape-redes a:hover { border-color: var(--texto); }
.rodape-pe { font: 400 12px/1 var(--f-mono); margin-top: 26px !important; }

/* ---------- telas menores ---------- */
@media (max-width: 900px) {
  .menu { display: none; }
  .som { margin-left: auto; }
  .grupo, .teaser { grid-template-columns: 1fr; }
  .grupo-fundo::after { background: linear-gradient(to bottom, var(--noite), rgba(7, 11, 14, .8) 30%, rgba(7, 11, 14, .88)); }
  .teaser-video { max-width: 340px; width: 100%; justify-self: center; }
  .proximo-relogio { gap: 14px; }
}
@media (max-width: 520px) {
  .marca { font-size: 17px; }
  .grade-avisos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .aviso-titulo { font-size: 21px; }
  .aviso-corpo { padding: 12px; }
  .proximo { display: grid; }
}

/* ---------- quem pede menos movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .granulado { animation: none; }
  .chuva { display: none; }
  .revelar { opacity: 1; transform: none; }
}