/* ============================================================
   SPRINT CREATIVE — LP /formatos
   Catálogo de formatos em movimento, por etapa do Sprint Circuit.
   Mesmo fundo escuro, aura e grão da home. A "Torra Norte" é uma
   marca fictícia (fotos e vídeos gerados na Higgsfield) para que o
   criativo do cliente não se confunda com a Sprint.
   ============================================================ */
.lpf {
  --bg: var(--preto); --fg: var(--off-white);
  --line: rgba(255, 249, 232, .12); --line-strong: rgba(255, 249, 232, .3);
  --muted: rgba(255, 249, 232, .62); --fill: rgba(255, 249, 232, .05);
  --btn-bg: var(--off-white); --btn-fg: var(--preto); --btn-bg-hover: #fff;
  --tn-verde: #1d3b2f; --tn-creme: #f3e6cf; --tn-ambar: #e3a13b;
  --t: 6s;
  background: var(--preto); color: var(--off-white);
}
.lpf .btn--ghost { color: var(--off-white); border-color: var(--line-strong); }

/* ─── Abertura ─────────────────────────────────────────────── */
.abre { position: relative; overflow: hidden; padding: calc(var(--nav-h) + clamp(3rem, 7vw, 6rem)) var(--gutter) clamp(2.5rem, 5vw, 4rem); }
.abre > *:not(.aura) { position: relative; z-index: 2; max-width: 1400px; margin-inline: auto; }
.abre__texto { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 2rem clamp(2rem, 5vw, 5rem); align-items: end; }
.abre__titulo { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 5.4vw, 5.4rem); line-height: .96; text-transform: uppercase; max-width: 13ch; }
.abre__sub { font-size: clamp(1.02rem, 1.3vw, 1.2rem); line-height: 1.6; max-width: 44ch; color: rgba(255, 249, 232, .8); }
.abre__acoes { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.abre__nota { margin-top: 1.25rem; font-size: .8rem; color: var(--muted); }

/* A parede: cinco telas, a mesma campanha, ao mesmo tempo */
.parede { margin-top: clamp(3rem, 6vw, 5rem) !important; display: flex; align-items: flex-end; gap: clamp(.75rem, 1.8vw, 1.75rem); }
.parede__item { margin: 0; display: flex; flex-direction: column; gap: .8rem; }
.parede__item figcaption { font-size: .85rem; color: var(--muted); }
.parede__tela { position: relative; background: #000; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 249, 232, .16), 0 2rem 4rem -1rem rgba(126, 83, 250, .28); }
.parede__tela::after { content: ''; position: absolute; inset: 0; background: #000; animation: ligar .6s calc(.4s + var(--i) * .18s) var(--ease) both; pointer-events: none; z-index: 5; }
@keyframes ligar { from { opacity: 1; } to { opacity: 0; } }
.parede__item--tv { flex: 34; }
.parede__item--tv .parede__tela { aspect-ratio: 16/9; border-radius: 8px; }
.parede__item--stories { flex: 10.5; }
.parede__item--stories .parede__tela { aspect-ratio: 9/19; border-radius: clamp(12px, 1.6vw, 22px); }
.parede__item--metro { flex: 12; }
.parede__item--metro .parede__tela { aspect-ratio: 9/16; border-radius: 3px; }
.parede__item--portal { flex: 22; }
.parede__item--portal .parede__tela { aspect-ratio: 4/3; background: #fffdf6; border-radius: 8px; }
.parede__item--encosto { flex: 17; }
.parede__item--encosto .parede__tela { aspect-ratio: 4/3; border-radius: 12px; }

/* ─── Catálogo com abas ───────────────────────────────────── */
.expl { position: relative; scroll-margin-top: var(--nav-h); }
.expl__barra { position: sticky; top: var(--nav-h); z-index: 50; display: flex; align-items: center; gap: 1rem; padding: .75rem var(--gutter); background: rgba(0, 0, 0, .86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-block: 1px solid var(--line); }
.abas { display: flex; gap: .4rem; flex: 1; overflow-x: auto; scrollbar-width: none; }
.abas::-webkit-scrollbar { display: none; }
.aba { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .55rem; padding: .6rem 1.05rem; border-radius: 100px; font-weight: 600; font-size: .9rem; color: var(--muted); border: 1px solid transparent; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.aba:hover { color: var(--off-white); border-color: var(--line-strong); }
.aba[aria-selected="true"] { color: var(--preto); background: var(--off-white); }
.aba__n { font-size: .72rem; font-weight: 500; min-width: 1.5em; padding: .1em .45em; border-radius: 1em; background: var(--fill); text-align: center; }
.aba[aria-selected="true"] .aba__n { background: var(--grad); color: var(--preto); }
.expl__cta { flex: 0 0 auto; padding: .65rem 1.3rem; font-size: .75rem; }

.expl__corpo { max-width: 1400px; margin-inline: auto; padding: clamp(2.5rem, 5vw, 4.5rem) var(--gutter) clamp(4rem, 8vw, 7rem); }
.painel__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1rem clamp(2rem, 5vw, 5rem); align-items: end; margin-bottom: clamp(1.75rem, 3.5vw, 3rem); }
.painel__nome { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.6rem, 7vw, 6.4rem); line-height: .9; text-transform: uppercase; background: linear-gradient(180deg, var(--off-white) 30%, rgba(255, 249, 232, .55)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.painel__linha { font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.5; max-width: 42ch; color: rgba(255, 249, 232, .82); }
.painel__linha a { display: inline-block; margin-top: .35rem; font-size: .92rem; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.painel__linha a:hover { color: var(--off-white); }
.painel:not([hidden]) .viewer { animation: entrar .5s var(--ease) both; }
@keyframes entrar { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.viewer { display: grid; grid-template-columns: minmax(250px, .78fr) minmax(0, 1.55fr); gap: clamp(1.25rem, 3vw, 3rem); align-items: start; }
.viewer__lista { list-style: none; display: grid; gap: .25rem; }
.fmt { display: grid; gap: .2rem; width: 100%; text-align: left; padding: .85rem 1rem .85rem 1.15rem; border-radius: 12px; position: relative; transition: background var(--dur) var(--ease); }
.fmt::before { content: ''; position: absolute; left: 0; top: .85rem; bottom: .85rem; width: 3px; border-radius: 3px; background: transparent; transition: background var(--dur) var(--ease); }
.fmt__nome { font-weight: 600; font-size: 1rem; }
.fmt__onde { color: var(--muted); font-size: .86rem; line-height: 1.45; }
.fmt:hover { background: var(--fill); }
.fmt[aria-pressed="true"] { background: rgba(255, 249, 232, .07); }
.fmt[aria-pressed="true"]::before { background: var(--grad); }

.viewer__palco { position: sticky; top: calc(var(--nav-h) + 5.5rem); }
.tela { position: relative; aspect-ratio: 4/3; border-radius: 18px; overflow: hidden; container-type: inline-size;
  background: radial-gradient(70% 60% at 50% 30%, rgba(126, 83, 250, .2), transparent 70%), radial-gradient(55% 45% at 85% 95%, rgba(233, 85, 73, .16), transparent 70%), #000;
  box-shadow: 0 0 0 1px var(--line), inset 0 -8rem 6rem -6rem rgba(237, 134, 89, .08); }
.info { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .35rem 2rem; padding-top: 1.25rem; }
.info__nome { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.05rem, 1.6vw, 1.4rem); line-height: 1.1; grid-column: 1 / -1; margin-bottom: .4rem; }
.info__onde { font-size: 1.02rem; line-height: 1.5; }
.info__onde span { display: block; font-size: .8rem; color: var(--muted); margin-bottom: .15rem; }
.info__serve { color: var(--muted); font-size: .95rem; line-height: 1.5; align-self: end; }
.controles { display: flex; align-items: center; gap: .75rem; margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.ctl { padding: .55rem 1.05rem; border-radius: 100px; border: 1px solid var(--line-strong); font-size: .85rem; font-weight: 500; transition: border-color var(--dur), background var(--dur); }
.ctl:hover { border-color: var(--off-white); background: var(--fill); }
.ctl:last-child { margin-left: auto; }
.ctl__cont { font-size: .85rem; color: var(--muted); }

/* ─── Fecho ────────────────────────────────────────────────── */
.fecho { position: relative; overflow: hidden; padding: clamp(5rem, 11vw, 9rem) var(--gutter); text-align: center; border-top: 1px solid var(--line); }
.fecho > *:not(.aura) { position: relative; z-index: 2; }
.fecho__titulo { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 6vw, 5.5rem); line-height: .95; text-transform: uppercase; }
.fecho__sub { max-width: 44ch; margin: 1.25rem auto 2rem; font-size: 1.1rem; color: rgba(255, 249, 232, .72); }

/* ─── Responsivo ───────────────────────────────────────────── */
@media (max-width: 1080px) { .expl__cta { display: none; } }
@media (max-width: 900px) {
  .abre__texto, .painel__head { grid-template-columns: 1fr; }
  .parede { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; margin-inline: calc(var(--gutter) * -1) !important; padding-inline: var(--gutter); scrollbar-width: none; }
  .parede__item { scroll-snap-align: start; }
  .parede__item--tv { flex: 0 0 72%; }
  .parede__item--stories { flex: 0 0 24%; }
  .parede__item--metro { flex: 0 0 27%; }
  .parede__item--portal { flex: 0 0 50%; }
  .parede__item--encosto { flex: 0 0 40%; }
  .viewer { grid-template-columns: 1fr; }
  .viewer__palco { position: static; }
  .viewer__lista { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: none; }
  .viewer__lista::-webkit-scrollbar { display: none; }
  .viewer__lista li { flex: 0 0 auto; }
  .fmt { padding: .55rem 1rem; border: 1px solid var(--line-strong); border-radius: 100px; }
  .fmt::before, .fmt__onde { display: none; }
  .fmt__nome { font-size: .88rem; white-space: nowrap; }
  .fmt[aria-pressed="true"] { background: var(--off-white); color: var(--preto); border-color: var(--off-white); }
  .info { grid-template-columns: 1fr; }
  .aba { padding: .5rem .85rem; font-size: .85rem; }
}

/* ============================================================
   MOCKUPS
   Tudo dentro de .tela usa em, e 1em acompanha a largura da tela.
   ============================================================ */
.mk { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.3cqw; line-height: 1.3; color: var(--preto); }
.parede .mk { font-size: 1em; }

/* Criativo fictício: três cenas em loop de 6s */
.spot { position: absolute; inset: 0; container-type: size; background: var(--tn-verde); color: var(--tn-creme); overflow: hidden; }
.spot__bola { position: absolute; width: 70cqmin; aspect-ratio: 1; border-radius: 50%; background: var(--tn-ambar); right: -22cqmin; bottom: -30cqmin; animation: bola var(--t) var(--ease) infinite; }
.spot__c { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 9cqw; opacity: 0; }
.spot__c1 { animation: c1 var(--t) var(--ease) infinite; }
.spot__c2 { animation: c2 var(--t) var(--ease) infinite; }
.spot__c3 { animation: c3 var(--t) var(--ease) infinite; align-items: flex-start; }
.spot__marca { font-weight: 600; font-size: min(15cqmin, 11cqw); letter-spacing: -.03em; line-height: 1; }
.spot__marca i { display: inline-block; width: .32em; height: .32em; border-radius: 50%; background: var(--tn-ambar); margin-left: .08em; font-style: normal; }
.spot__frase { font-weight: 500; font-size: min(10cqmin, 7.5cqw); line-height: 1.12; max-width: 12em; }
.spot__cta { font-weight: 600; font-size: min(8cqmin, 6cqw); background: var(--tn-creme); color: var(--tn-verde); padding: .45em .95em; border-radius: 100px; }
.spot__site { margin-top: .6em; font-size: min(5.5cqmin, 4cqw); opacity: .8; }
@keyframes c1 { 0% { opacity: 0; transform: translateY(8%); } 5%, 28% { opacity: 1; transform: none; } 33%, 100% { opacity: 0; } }
@keyframes c2 { 0%, 33% { opacity: 0; transform: translateY(8%); } 38%, 61% { opacity: 1; transform: none; } 66%, 100% { opacity: 0; } }
@keyframes c3 { 0%, 66% { opacity: 0; transform: scale(.96); } 71%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes bola { 0%, 100% { transform: scale(.55); } 33% { transform: translate(-12%, -8%) scale(1); } 66% { transform: translate(-30%, -30%) scale(1.45); } }

/* Aparelhos */
.tv { position: relative; width: 80%; aspect-ratio: 16/9; background: #000; border: .55em solid #000; border-radius: .4em; margin-top: -4%; }
.tv::after { content: ''; position: absolute; left: 50%; bottom: -2.4em; width: 22%; height: 1.4em; transform: translateX(-50%); border-top: .45em solid #000; border-radius: .2em; }
.cel { position: relative; height: 88%; aspect-ratio: 9/19; background: #000; border-radius: 2.1em; padding: .45em; }
.cel__tela { position: relative; width: 100%; height: 100%; border-radius: 1.7em; overflow: hidden; background: #fff; }
.cel--deitado { height: auto; width: 76%; aspect-ratio: 19/9; }
.nav3 { position: relative; width: 86%; height: 84%; background: #fffdf6; border-radius: .7em; box-shadow: 0 0 0 1.5px #000; overflow: hidden; display: flex; flex-direction: column; }
.nav3__barra { flex: 0 0 auto; height: 2.1em; display: flex; align-items: center; gap: .35em; padding: 0 .8em; border-bottom: 1px solid rgba(0,0,0,.14); }
.nav3__barra i { width: .55em; height: .55em; border-radius: 50%; background: rgba(0,0,0,.2); }
.nav3__url { margin-left: .8em; flex: 1; max-width: 55%; height: 1.2em; border-radius: 1em; background: rgba(0,0,0,.07); font-size: .7em; display: flex; align-items: center; padding-left: .8em; color: rgba(0,0,0,.55); }
.nav3__pag { position: relative; flex: 1; padding: 1em 1.2em; overflow: hidden; }
.ln { height: .5em; background: rgba(0,0,0,.12); border-radius: .3em; margin: .5em 0; }
.ln--forte { height: .85em; background: rgba(0,0,0,.75); margin: .3em 0 .7em; }
.tag { display: inline-block; font-size: .7em; padding: .2em .6em; border-radius: .3em; background: rgba(0,0,0,.08); color: rgba(0,0,0,.65); }
.pil { display: inline-flex; align-items: center; gap: .4em; font-size: .8em; font-weight: 500; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.18); padding: .45em .8em; border-radius: 2em; white-space: nowrap; }
.av { width: 2em; height: 2em; border-radius: 50%; background: var(--tn-verde); flex: 0 0 auto; }

/* Cartão genérico de interface */
.ui { background: #fff; border-radius: .7em; box-shadow: 0 0 0 1px rgba(0,0,0,.14), 0 .6em 1.4em rgba(0,0,0,.06); padding: .9em 1em; }

/* ---- Marca ---- */
.mk-naming .ui { width: 64%; padding: 1.3em 1.6em; }
.naming__lista { display: grid; gap: .5em; margin-bottom: 1.1em; }
.naming__nome { position: relative; font-size: 1.35em; font-weight: 600; width: max-content; padding: 0 .2em; }
.naming__nome::after { content: ''; position: absolute; left: 0; right: 0; top: 55%; height: .12em; background: #000; transform: scaleX(0); transform-origin: left; animation: riscar var(--t) var(--ease) infinite; animation-delay: calc(var(--d) * .5s); }
.naming__nome--vence::after { display: none; }
.naming__nome--vence { animation: vence var(--t) var(--ease) infinite; border-radius: .25em; }
.naming__pos { font-size: .95em; color: rgba(0,0,0,.7); animation: aparece var(--t) var(--ease) infinite; animation-delay: 2.4s; opacity: 0; }
@keyframes riscar { 0%, 8% { transform: scaleX(0); } 16%, 92% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes vence { 0%, 34% { background: transparent; color: #000; } 40%, 92% { background: var(--tn-verde); color: var(--tn-creme); } 100% { background: transparent; } }
@keyframes aparece { 0% { opacity: 0; transform: translateY(.4em); } 8%, 60% { opacity: 1; transform: none; } 70%, 100% { opacity: 0; } }

.mk-sistema .grade { width: 80%; display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: .7em; aspect-ratio: 16/9; }
.grade > * { border-radius: .6em; opacity: 0; animation: pop var(--t) var(--ease) infinite; animation-delay: calc(var(--d) * .28s); display: grid; place-items: center; }
.grade__logo { grid-row: span 2; background: var(--tn-verde); color: var(--tn-creme); font-weight: 600; font-size: 2em; letter-spacing: -.03em; }
.grade__logo i { display: inline-block; width: .3em; height: .3em; border-radius: 50%; background: var(--tn-ambar); }
.grade__cores { display: grid !important; grid-template-columns: repeat(3, 1fr); overflow: hidden; }
.grade__cores b { height: 100%; }
.grade__tipo { background: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); font-size: 2.4em; font-weight: 600; color: var(--tn-verde); }
.grade__xicara { background: var(--tn-creme); }
.grade__xicara span { width: 38%; aspect-ratio: 1; border-radius: 0 0 40% 40%; background: var(--tn-verde); position: relative; }
.grade__xicara span::after { content: ''; position: absolute; right: -28%; top: 18%; width: 30%; height: 45%; border: .35em solid var(--tn-verde); border-left: 0; border-radius: 0 50% 50% 0; }
.grade__manual { background: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); padding: .8em; place-items: stretch !important; align-content: center; }
@keyframes pop { 0% { opacity: 0; transform: scale(.9); } 6%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }

.site__rolo { animation: rolar var(--t) var(--ease-io, ease-in-out) infinite; }
.site__heroi { position: relative; height: 11em; border-radius: .5em; overflow: hidden; margin-bottom: 1em; }
.site__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7em; margin-bottom: 1em; }
.site__cards div { aspect-ratio: 1; border-radius: .5em; background: var(--tn-creme); position: relative; }
.site__cards div::after { content: ''; position: absolute; inset: 30%; border-radius: 50%; background: var(--tn-ambar); }
.site__cards div:nth-child(2)::after { background: var(--tn-verde); }
@keyframes rolar { 0%, 15% { transform: translateY(0); } 45%, 62% { transform: translateY(-42%); } 90%, 100% { transform: translateY(0); } }

.perfil__topo { display: flex; align-items: center; gap: .6em; padding: 1em .8em .6em; }
.perfil__topo .av { width: 3.2em; height: 3.2em; box-shadow: 0 0 0 .18em #fff, 0 0 0 .32em var(--tn-ambar); }
.perfil__grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: .5em; }
.perfil__grade b { aspect-ratio: 1; opacity: 0; animation: pop var(--t) var(--ease) infinite; animation-delay: calc(var(--d) * .2s); }

/* ---- GRID ---- */
.mk-rastreio .fontes { position: absolute; left: 8%; top: 50%; transform: translateY(-50%); display: grid; gap: .8em; }
.mk-rastreio .leadc { position: absolute; right: 8%; top: 50%; transform: translateY(-50%); width: 40%; }
.lead__linha { display: flex; justify-content: space-between; gap: 1em; font-size: .85em; padding: .45em 0; border-bottom: 1px solid rgba(0,0,0,.08); opacity: 0; animation: aparece var(--t) var(--ease) infinite; animation-delay: calc(1.6s + var(--d) * .3s); }
.lead__linha b { font-weight: 600; }
.lead__titulo { font-weight: 600; margin-bottom: .3em; }
.ponto { position: absolute; width: .8em; height: .8em; border-radius: 50%; background: var(--goiaba); left: 27%; top: 46%; animation: viajar var(--t) var(--ease) infinite; }
@keyframes viajar { 0% { transform: translate(0, 0); opacity: 0; } 5% { opacity: 1; } 25% { transform: translate(24em, 1.5em); opacity: 1; } 28%, 100% { opacity: 0; transform: translate(24em, 1.5em); } }
.fontes .pil:nth-child(2) { box-shadow: 0 0 0 2px var(--goiaba); }

.mk-crm .quadro { width: 86%; display: grid; grid-template-columns: repeat(3, 1fr); gap: .8em; }
.coluna { background: rgba(0,0,0,.05); border-radius: .6em; padding: .7em; min-height: 13em; position: relative; }
.coluna__t { font-weight: 600; font-size: .85em; margin-bottom: .6em; }
.coluna .ui { padding: .6em .7em; margin-bottom: .5em; font-size: .8em; }
.card--movel { position: absolute; left: .7em; right: .7em; top: 2.4em; z-index: 2; box-shadow: 0 0 0 2px var(--goiaba), 0 .8em 1.6em rgba(0,0,0,.14) !important; animation: kanban var(--t) var(--ease) infinite; }
@keyframes kanban { 0%, 12% { transform: translateX(0); } 30%, 42% { transform: translateX(calc(100% + 2.2em)); } 60%, 100% { transform: translateX(calc(200% + 4.4em)); } }
.retorno { position: absolute; bottom: 7%; left: 50%; transform: translateX(-50%); background: #000; color: var(--off-white); font-size: .85em; padding: .6em 1.1em; border-radius: 2em; white-space: nowrap; opacity: 0; animation: aparece var(--t) var(--ease) infinite; animation-delay: 3.8s; }

.mk-painel .ui { width: 78%; padding: 1.3em 1.5em; }
.painel__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2em; align-items: end; height: 12em; }
.painel__col { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.painel__num { font-weight: 600; font-size: 1.6em; }
.painel__barra { border-radius: .3em .3em 0 0; background: var(--preto); transform-origin: bottom; animation: crescer var(--t) var(--ease) infinite; margin-top: .3em; }
.painel__rot { font-size: .8em; color: rgba(0,0,0,.6); margin-top: .4em; }
.painel__dif { margin-top: 1em; padding-top: .8em; border-top: 1px solid rgba(0,0,0,.1); font-size: .9em; display: flex; justify-content: space-between; opacity: 0; animation: aparece var(--t) var(--ease) infinite; animation-delay: 2.2s; }
@keyframes crescer { 0% { transform: scaleY(0); } 20%, 90% { transform: scaleY(1); } 100% { transform: scaleY(0); } }

/* ---- REACH ---- */
.tv__ui { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.tv__rot { position: absolute; top: 5%; left: 4%; font-size: .75em; color: #fff; background: rgba(0,0,0,.55); padding: .25em .6em; border-radius: .3em; }
.tv__barra { position: absolute; left: 4%; right: 4%; bottom: 6%; height: .3em; background: rgba(255,255,255,.3); border-radius: .3em; overflow: hidden; }
.tv__barra::after { content: ''; position: absolute; inset: 0; background: #fff; transform-origin: left; animation: encher var(--t) linear infinite; }
@keyframes encher { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.player { position: relative; aspect-ratio: 16/9; border-radius: .4em; overflow: hidden; margin: .6em 0; }
.player__pular { position: absolute; right: 0; bottom: 14%; z-index: 2; background: rgba(0,0,0,.7); color: #fff; font-size: .75em; padding: .45em .9em; border: 1px solid rgba(255,255,255,.4); border-right: 0; }
.player .tv__barra { left: 0; right: 0; bottom: 0; border-radius: 0; }
.player .tv__barra::after { background: #f4c20d; }

.faixa { position: relative; margin: .7em -1.2em; overflow: hidden; animation: faixa var(--t) var(--ease) infinite; }
@keyframes faixa { 0% { height: 0; } 10%, 88% { height: 9.5em; } 100% { height: 0; } }

.mk-display .nav3__pag { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.2em; }
.banner { position: absolute; right: 1.2em; top: 2.2em; width: 30%; aspect-ratio: 300/250; border-radius: .2em; overflow: hidden; animation: expandir var(--t) var(--ease) infinite; z-index: 2; box-shadow: 0 .8em 2em rgba(0,0,0,.2); }
.banner__pub { position: absolute; right: 1.2em; top: 1em; font-size: .6em; color: rgba(0,0,0,.5); }
@keyframes expandir { 0%, 38% { width: 30%; } 48%, 86% { width: 74%; } 96%, 100% { width: 30%; } }

.audio { padding: 1.4em 1.1em; display: flex; flex-direction: column; gap: .8em; height: 100%; background: #f6f2ea; }
.audio__capa { aspect-ratio: 1; border-radius: .5em; background: #2b2b2b; display: grid; place-items: center; color: #fff; font-weight: 600; }
.audio__onda { display: flex; align-items: center; gap: .18em; height: 3em; }
.audio__onda b { flex: 1; background: var(--tn-verde); border-radius: .2em; height: 30%; animation: onda 1.1s ease-in-out infinite; animation-delay: calc(var(--d) * -.13s); }
@keyframes onda { 0%, 100% { height: 20%; } 50% { height: 100%; } }
.audio__companion { position: relative; height: 4.2em; border-radius: .4em; overflow: hidden; margin-top: auto; }

.metro { position: absolute; inset: 0; background: linear-gradient(#d9ceb0 0 72%, #bfb393 72%); overflow: hidden; }
.metro__trem { position: absolute; top: 18%; height: 42%; width: 140%; left: -150%; background: #3b3b3b; border-radius: 1em; animation: trem var(--t) linear infinite; display: flex; gap: 3%; padding: 3% 4%; }
.metro__trem i { flex: 1; background: #9fb6c4; border-radius: .3em; }
@keyframes trem { 0%, 45% { left: -150%; } 75%, 100% { left: 120%; } }
.metro__tela { position: absolute; left: 34%; top: 10%; height: 70%; aspect-ratio: 9/16; border: .45em solid #111; background: #000; z-index: 2; }
.metro__tela::after { content: ''; position: absolute; left: 44%; width: 12%; top: 100%; height: 30%; background: #111; }
.metro__placa { position: absolute; right: 10%; top: 12%; z-index: 2; background: #1a4a8a; color: #fff; font-weight: 600; font-size: .9em; padding: .5em .9em; border-radius: .3em; }

.carro { position: absolute; inset: 0; background: #2a2724; display: grid; place-items: center; }
.encosto { position: relative; width: 58%; aspect-ratio: 1.3; background: #3d3935; border-radius: 3em 3em 1.2em 1.2em; display: grid; place-items: center; box-shadow: inset 0 -1em 2em rgba(0,0,0,.35); margin-top: -8%; }
.encosto__tablet { position: relative; width: 74%; aspect-ratio: 4/3; border: .4em solid #000; border-radius: .6em; overflow: hidden; }
.rota { position: absolute; left: 12%; right: 12%; bottom: 9%; color: #fff; font-size: .82em; display: grid; gap: .4em; }
.rota__linha { position: relative; height: .3em; background: rgba(255,255,255,.25); border-radius: .3em; }
.rota__linha::after { content: ''; position: absolute; top: 50%; left: 0; width: .9em; height: .9em; border-radius: 50%; background: var(--tn-ambar); transform: translate(-50%, -50%); animation: corrida var(--t) linear infinite; }
@keyframes corrida { from { left: 0; } to { left: 100%; } }

.mapa { position: absolute; inset: 0; background-color: #e8e1cc; background-image: linear-gradient(90deg, #fff 0 2%, transparent 2%), linear-gradient(#fff 0 2%, transparent 2%); background-size: 17% 21%; }
.mapa__raio { position: absolute; left: 50%; top: 50%; width: 38%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: rgba(227, 161, 59, .22); box-shadow: inset 0 0 0 2px var(--tn-ambar); }
.mapa__raio::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 2px var(--tn-ambar); animation: pulso 2s ease-out infinite; }
@keyframes pulso { from { transform: scale(1); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
.mapa__loja { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%); width: 2.2em; height: 2.2em; background: var(--tn-verde); border-radius: 50% 50% 50% 0; rotate: -45deg; }
.pessoa { position: absolute; width: .8em; height: .8em; border-radius: 50%; background: #444; animation: andar var(--t) linear infinite; animation-delay: calc(var(--d) * -1s); }
@keyframes andar { 0% { transform: translate(0, 0); background: #444; } 45% { background: #444; } 50%, 100% { transform: translate(var(--x), var(--y)); background: var(--tn-ambar); } }
.mapa__cont { position: absolute; right: 5%; top: 7%; }

.bloqueio { position: absolute; inset: 0; background: linear-gradient(160deg, #2b3a4a, #0f1a24); color: #fff; text-align: center; padding-top: 18%; }
.bloqueio__hora { font-size: 3.4em; font-weight: 300; line-height: 1; }
.bloqueio__data { font-size: .8em; opacity: .75; }
.notif { position: absolute; left: 6%; right: 6%; top: 42%; background: rgba(255,255,255,.88); color: #000; text-align: left; border-radius: 1em; padding: .7em .8em; display: flex; gap: .6em; animation: notif var(--t) var(--ease) infinite; font-size: .82em; }
.notif .av { width: 2.4em; height: 2.4em; border-radius: .6em; }
@keyframes notif { 0%, 10% { transform: translateY(-260%); opacity: 0; } 18%, 88% { transform: none; opacity: 1; } 96%, 100% { transform: translateY(-260%); opacity: 0; } }
.nativo { position: absolute; left: 6%; right: 6%; bottom: 7%; background: #fff; color: #000; border-radius: .8em; overflow: hidden; text-align: left; font-size: .75em; opacity: 0; animation: aparece var(--t) var(--ease) infinite; animation-delay: 2.6s; }
.nativo__img { position: relative; height: 5.5em; }
.nativo p { padding: .5em .8em .7em; }

.wifi { padding: 1.6em 1.1em; text-align: center; display: flex; flex-direction: column; gap: .8em; height: 100%; }
.wifi__video { position: relative; aspect-ratio: 16/10; border-radius: .5em; overflow: hidden; }
.wifi__prog { height: .35em; background: rgba(0,0,0,.1); border-radius: .3em; overflow: hidden; }
.wifi__prog::after { content: ''; display: block; height: 100%; background: var(--tn-verde); transform-origin: left; animation: encher var(--t) linear infinite; }
.wifi__btn { margin-top: auto; background: #000; color: #fff; border-radius: 2em; padding: .75em; font-weight: 600; font-size: .9em; animation: liberar var(--t) steps(1) infinite; }
@keyframes liberar { 0%, 97% { opacity: .3; } 98%, 100% { opacity: 1; } }

.jogo { position: absolute; inset: 0; background: #5b3fa0; display: grid; grid-template-columns: repeat(8, 1fr); gap: 3%; padding: 5% 18%; }
.jogo b { border-radius: 50%; }
.jogo__oferta { position: absolute; inset: 12% 22%; background: #fff; border-radius: .8em; padding: .7em; display: flex; flex-direction: column; gap: .5em; font-size: .85em; font-weight: 600; text-align: center; animation: oferta var(--t) var(--ease) infinite; }
.jogo__oferta .spot { position: relative; flex: 1; border-radius: .4em; }
@keyframes oferta { 0%, 8% { transform: scale(.6); opacity: 0; } 14%, 84% { transform: none; opacity: 1; } 90%, 100% { transform: scale(.9); opacity: 0; } }
.moedas { position: absolute; right: 4%; top: 6%; background: #ffd24a; color: #000; font-weight: 700; font-size: .8em; padding: .3em .7em; border-radius: 2em; animation: aparece var(--t) var(--ease) infinite; animation-delay: 5.1s; opacity: 0; }

.reels { position: absolute; inset: 0; background: #3a2a22; overflow: hidden; }
.reels__xicara { position: absolute; left: 50%; top: 44%; width: 42%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 0 0 45% 45%; background: var(--tn-creme); }
.reels__xicara::before { content: ''; position: absolute; right: -24%; top: 16%; width: 28%; height: 44%; border: .5em solid var(--tn-creme); border-left: 0; border-radius: 0 50% 50% 0; }
.vapor { position: absolute; bottom: 104%; width: 8%; height: 40%; border-radius: 50%; background: rgba(255,255,255,.5); filter: blur(3px); animation: vapor 2.4s ease-in infinite; animation-delay: calc(var(--d) * -.8s); }
@keyframes vapor { from { transform: translateY(0) scaleY(.6); opacity: 0; } 30% { opacity: .9; } to { transform: translateY(-60%) scaleY(1.2); opacity: 0; } }
.reels__base { position: absolute; left: 0; right: 0; bottom: 0; padding: 1em .9em 1.3em; background: linear-gradient(transparent, rgba(0,0,0,.65)); color: #fff; font-size: .78em; display: grid; gap: .4em; }
.reels__user { display: flex; align-items: center; gap: .5em; font-weight: 600; }
.reels__user .av { width: 1.9em; height: 1.9em; background: #d98b6a; }
.reels__parceria { font-size: .85em; opacity: .85; }
.reels__lado { position: absolute; right: .7em; bottom: 28%; display: grid; gap: 1em; }
.reels__lado i { width: 1.7em; height: 1.7em; border-radius: 50%; background: rgba(255,255,255,.85); }
.legenda { background: rgba(0,0,0,.6); color: #fff; padding: .15em .4em; font-weight: 600; font-size: 1.05em; justify-self: start; animation: legenda 3s steps(1) infinite; }
@keyframes legenda { 0% { opacity: 1; } 50% { opacity: .15; } }

/* ---- ENGAGE ---- */
.agenda { width: 86%; }
.agenda__t { font-weight: 600; margin-bottom: .6em; }
.agenda__grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: .5em; }
.agenda__dia { font-size: .72em; color: rgba(0,0,0,.55); text-align: center; }
.agenda__cel { aspect-ratio: .8; border-radius: .4em; background: rgba(0,0,0,.05); position: relative; overflow: hidden; }
.agenda__cel b { position: absolute; inset: 8%; border-radius: .3em; opacity: 0; animation: pop var(--t) var(--ease) infinite; animation-delay: calc(var(--d) * .22s); }

.ret { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-around; padding: 0 5%; }
.ret .tv { width: 40%; margin: 0; }
.ret .cel { height: 82%; }
.ret__linha { position: absolute; left: 44%; right: 36%; top: 48%; border-top: .2em dashed rgba(0,0,0,.4); }
.ret__linha::after { content: ''; position: absolute; top: -.5em; left: -.4em; width: .8em; height: .8em; border-radius: 50%; background: var(--goiaba); animation: seguir 2.4s var(--ease) infinite; }
@keyframes seguir { from { left: 0; } to { left: 100%; } }
.feed__topo { display: flex; align-items: center; gap: .45em; padding: .7em .6em; font-size: .7em; }
.feed__topo .av { width: 2.2em; height: 2.2em; }
.feed__topo small { display: block; font-size: .85em; color: rgba(0,0,0,.55); }
.feed__midia { position: relative; aspect-ratio: 1; overflow: hidden; }
.feed__cta { display: flex; justify-content: space-between; align-items: center; padding: .55em .7em; font-size: .7em; font-weight: 600; border-bottom: 1px solid rgba(0,0,0,.08); }
.feed__texto { padding: .5em .7em; font-size: .68em; }
.feed__texto b { font-weight: 600; }

.seq { display: flex; align-items: center; gap: 4%; height: 84%; }
.seq .cel { height: 100%; opacity: .35; animation: foco calc(var(--t) * 1.5) steps(1) infinite; animation-delay: calc(var(--d) * var(--t) * -.5 + var(--t)); }
@keyframes foco { 0% { opacity: 1; transform: scale(1.04); } 33.3% { opacity: .35; transform: none; } }
.seq__barra { position: absolute; top: .6em; left: .6em; right: .6em; display: flex; gap: .2em; z-index: 3; }
.seq__barra i { flex: 1; height: .22em; border-radius: .2em; background: rgba(255,255,255,.45); }
.seq__barra i.on { background: #fff; }
.seq__txt { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 0 .8em 2em; color: var(--tn-creme); font-weight: 600; font-size: 1.05em; line-height: 1.15; z-index: 2; }

/* ---- CONVERT ---- */
.busca { width: 80%; margin: 1.2em auto 0; }
.busca__campo { display: flex; align-items: center; gap: .6em; height: 2.6em; border-radius: 2em; box-shadow: 0 0 0 1px rgba(0,0,0,.2), 0 .3em .8em rgba(0,0,0,.06); padding: 0 1em; font-size: .95em; overflow: hidden; }
.busca__campo::before { content: ''; width: .8em; height: .8em; border-radius: 50%; border: .15em solid rgba(0,0,0,.5); flex: 0 0 auto; }
.busca__txt { overflow: hidden; white-space: nowrap; width: 0; animation: digitar var(--t) steps(26) infinite; border-right: .1em solid #000; }
@keyframes digitar { 0% { width: 0; } 30%, 100% { width: 13.2em; } }
.busca__res { margin-top: 1.3em; opacity: 0; animation: aparece var(--t) var(--ease) infinite; animation-delay: 2s; }
.busca__res p { font-size: .85em; }
.busca__res .tit { color: #1a0dab; font-size: 1.15em; margin: .15em 0; }
.busca__res + .busca__org { margin-top: 1.2em; }

.carrossel { display: flex; width: 300%; height: 100%; animation: carrossel var(--t) var(--ease) infinite; }
.carrossel > div { position: relative; flex: 1; }
@keyframes carrossel { 0%, 28% { transform: none; } 33%, 61% { transform: translateX(-33.333%); } 66%, 95% { transform: translateX(-66.666%); } 100% { transform: none; } }
.lamina { display: grid; place-items: center; color: var(--tn-creme); font-weight: 600; font-size: 1.1em; text-align: center; padding: 1em; }

.tt { position: absolute; inset: 0; color: #fff; }
.tt__lado { position: absolute; right: .6em; bottom: 30%; display: grid; gap: .9em; z-index: 3; }
.tt__lado i { width: 1.8em; height: 1.8em; border-radius: 50%; background: rgba(255,255,255,.9); }
.tt__base { position: absolute; left: .8em; right: 3.2em; bottom: 1.2em; z-index: 3; font-size: .75em; display: grid; gap: .4em; }
.tt__btn { background: rgba(255,255,255,.25); border-radius: .3em; padding: .55em; font-weight: 600; text-align: center; animation: ttbtn var(--t) steps(1) infinite; }
@keyframes ttbtn { 0%, 45% { background: rgba(255,255,255,.25); color: #fff; } 46%, 100% { background: var(--tn-ambar); color: #000; } }

.li { width: 56%; margin: 0 auto; }
.li__alvos { display: flex; flex-wrap: wrap; gap: .4em; margin-bottom: .8em; }
.li__alvos .pil { opacity: 0; animation: aparece var(--t) var(--ease) infinite; animation-delay: calc(var(--d) * .4s); font-size: .7em; }
.li .ui { padding: 0; overflow: hidden; }
.li .feed__midia { aspect-ratio: 1.9; }

.lp { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1em; align-items: center; height: 100%; background: var(--tn-verde); color: var(--tn-creme); margin: -1em -1.2em; padding: 1.2em 1.5em; }
.lp h4 { font-size: 1.5em; line-height: 1.1; font-weight: 600; }
.lp p { font-size: .8em; opacity: .8; margin-top: .5em; }
.lp__form { background: #fff; color: #000; border-radius: .6em; padding: .9em; display: grid; gap: .55em; }
.lp__campo { height: 1.8em; border-bottom: 1px solid rgba(0,0,0,.25); position: relative; }
.lp__campo::after { content: ''; position: absolute; left: 0; bottom: .4em; height: .45em; border-radius: .2em; background: rgba(0,0,0,.6); width: 0; animation: preencher var(--t) steps(8) infinite; animation-delay: calc(var(--d) * .6s); }
@keyframes preencher { 0%, 5% { width: 0; } 15%, 90% { width: var(--w, 70%); } 100% { width: 0; } }
.lp__btn { background: var(--tn-ambar); border-radius: 2em; padding: .5em; text-align: center; font-weight: 600; font-size: .8em; animation: apertar var(--t) steps(1) infinite; }
@keyframes apertar { 0%, 50% { transform: none; } 51%, 54% { transform: scale(.94); } 55% { transform: none; } }
.toast { position: absolute; left: 50%; bottom: 1.2em; transform: translateX(-50%); background: #000; color: #fff; font-size: .8em; padding: .6em 1.1em; border-radius: 2em; white-space: nowrap; opacity: 0; animation: aparece var(--t) var(--ease) infinite; animation-delay: 3.4s; z-index: 3; }

.ab { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5em; width: 86%; }
.ab__lado { display: grid; gap: .6em; }
.ab__rot { font-weight: 600; }
.ab__mini { aspect-ratio: 4/3; background: #fffdf6; border-radius: .5em; box-shadow: 0 0 0 1.5px #000; padding: .8em; display: flex; flex-direction: column; }
.ab__mini .btnm { margin-top: auto; align-self: flex-start; background: #000; color: #fff; font-size: .7em; padding: .4em .9em; border-radius: 2em; }
.ab__lado--b .btnm { background: var(--tn-ambar); color: #000; font-size: .85em; align-self: stretch; text-align: center; }
.ab__medida { height: .7em; border-radius: .4em; background: rgba(0,0,0,.08); overflow: hidden; }
.ab__medida::after { content: ''; display: block; height: 100%; width: var(--w); background: #000; transform-origin: left; animation: crescerx var(--t) var(--ease) infinite; }
.ab__lado--b .ab__medida::after { background: var(--grad); }
@keyframes crescerx { 0% { transform: scaleX(0); } 45%, 92% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
.ab__veredito { grid-column: 1 / -1; justify-self: center; opacity: 0; animation: aparece var(--t) var(--ease) infinite; animation-delay: 2.9s; }

/* ---- EXPAND ---- */
.expand { display: flex; align-items: center; justify-content: center; gap: 5%; width: 100%; height: 100%; }
.expand .cel { height: 84%; }
.publico { display: grid; gap: .6em; max-width: 34%; }
.publico .pil { white-space: normal; }
.estrelas { display: flex; gap: .25em; color: var(--tn-ambar); font-size: 1.3em; }
.estrelas b { opacity: 0; animation: aparece var(--t) var(--ease) infinite; animation-delay: calc(var(--d) * .25s); }
.depo { padding: .8em; display: grid; gap: .5em; }
.depo q { font-size: .8em; }

.ltv { width: 84%; }
.ltv svg { width: 100%; height: auto; overflow: visible; }
.ltv__linha { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: tracar var(--t) var(--ease) infinite; }
@keyframes tracar { 0% { stroke-dashoffset: 1; } 45%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
.ltv__leg { display: flex; flex-wrap: wrap; gap: .5em 1.4em; font-size: .8em; margin-top: .7em; }
.ltv__leg span::before { content: ''; display: inline-block; width: .8em; height: .8em; border-radius: 50%; background: var(--c); margin-right: .4em; vertical-align: -.05em; }

/* ─── Movimento: pausa fora da tela e respeito a reduced motion ─ */
.expl:not(.is-vivo) .tela *, .abre:not(.is-vivo) .parede * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .tela *, .parede * { animation-play-state: paused !important; animation-delay: -2.6s !important; }
  .parede__tela::after { display: none; }
}

/* Ajustes de revisão */
.cel { overflow: hidden; }
.seq { height: 64%; }
.grade__cores { place-items: stretch !important; }
.grade__manual { display: block !important; padding-top: 1.4em !important; }
.mk-rastreio { font-size: 3cqw; }
.mk-rastreio .fontes { left: 6%; }
.ponto { left: 24%; }
@keyframes viajar { 0% { transform: translate(0, 0); opacity: 0; } 5% { opacity: 1; } 25% { transform: translate(15em, 1.2em); opacity: 1; } 28%, 100% { opacity: 0; transform: translate(15em, 1.2em); } }
.painel__cols { justify-items: start; }
.painel__barra { width: 55%; }
.painel__col:nth-child(2) .painel__barra { background: rgba(0,0,0,.45); }
.painel__col:nth-child(3) .painel__barra { background: var(--grad); }
.expand { position: absolute; inset: 0; }

/* ─── Criativo com mídia real (fotos e vídeos da Higgsfield) ─── */
.spot { background: #000; color: #fff9ee; }
.spot__midia { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.spot::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(10, 20, 15, .72), rgba(10, 20, 15, .15) 62%, transparent); }
.spot__c { z-index: 2; text-shadow: 0 .1em .6em rgba(0, 0, 0, .35); }
.spot__bola { display: none; }
.spot__cta { background: var(--tn-ambar); color: #1a1a1a; text-shadow: none; }
@container (max-aspect-ratio: 3/4) {
  .spot::before { background: linear-gradient(0deg, rgba(10, 20, 15, .8), rgba(10, 20, 15, .1) 60%, transparent); }
  .spot__c { justify-content: flex-end; padding-bottom: 12cqh; }
}
.site__cards div { background: center/cover no-repeat; }
.site__cards div::after { display: none; }
.lamina { background: center/cover no-repeat; position: relative; align-items: end; justify-items: start; }
.lamina span { position: relative; background: rgba(0, 0, 0, .55); color: #fff; padding: .3em .6em; border-radius: .3em; font-size: .85em; }
.lp { position: relative; overflow: hidden; background: #0d1a14; }
.lp > * { position: relative; z-index: 1; }
.lp .lp__fundo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: .5; }
.reels .spot__midia.kb { animation: kb 12s ease-in-out infinite alternate; }
@keyframes kb { from { transform: scale(1); } to { transform: scale(1.12) translate(-2%, -2%); } }
.reels__base { z-index: 2; }
.reels__lado { z-index: 2; }
.seq .cel__tela .spot__midia { opacity: .85; }
.seq__txt { text-shadow: 0 .1em .5em rgba(0, 0, 0, .6); background: linear-gradient(0deg, rgba(0, 0, 0, .55), transparent 60%); }
.nativo__img .spot__midia { position: absolute; }
.grade__xicara { background-size: cover !important; }
.pil { color: #111; }
.ui { color: #111; }
.tv, .cel { box-shadow: 0 0 0 1px rgba(255, 249, 232, .22), 0 1.5em 3em -1em rgba(0, 0, 0, .8); }
.tv::after { border-top-color: #3a3a3a; }
.abre .aura img { opacity: .62; }