/* Sora */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url("../fonts/sora.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* fim Sora */
/* Inter */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/inter.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* fim Inter */
/* =====================================================================
   KIT BASE VOWT / Web Thomaz - estilos comuns dos sites
   Copie para clientes/<cliente>/src/css/ (o novo_cliente.py ja faz isso)
   e ajuste so as variaveis de :root. Componentes:
   .container .secao .escura .clara .btn .nowrap .revela .foto-inteira
   .ponte .borda-luz .faixa-infinita .faixa-videos .player .menu-cel
   .barra-cel .wa-flutuante .cookies .mapa-toque .copiar .rodape-vowt
   ===================================================================== */

:root {
  /* ---- Marca do cliente (trocar) ---- */
  --cor-1: #0442D2;          /* principal (botoes, destaques) */
  --cor-1-escura: #0335A8;
  --cor-2: #054BF0;          /* apoio */
  --escuro: #010119;         /* secoes escuras */
  --escuro-2: #15152B;
  --claro: #FFFFFF;          /* secoes claras */
  --claro-2: #F4F5F8;
  --texto: #15152B;
  --texto-suave: #4A4A5E;
  --texto-claro: #FFFFFF;
  --linha: #2A2A3E;
  --cinza: #B2B2BA;
  --wa: #25D366;
  /* ---- Tipografia (sempre sem serifa) ---- */
  --fonte-titulo: "Sora", "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fonte-texto: "Sora", "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* ---- Medidas ---- */
  --topo-h: 68px;            /* altura do cabecalho fixo */
  --barra-cel-h: 62px;       /* altura da barra inferior do celular */
  --raio: 16px;
  --sombra: 0 18px 50px rgba(1, 1, 25, .18);
  --secao-y: clamp(44px, 6.5vw, 88px);   /* espaco vertical das secoes: curto de proposito */
  --gutter: clamp(16px, 4vw, 32px);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--topo-h) + 8px); }
body {
  margin: 0; font-family: var(--fonte-texto); color: var(--texto); background: var(--claro);
  font-size: 16px; line-height: 1.55; overflow-x: clip; text-rendering: optimizeLegibility;
}
@supports not (overflow: clip) { body { overflow-x: hidden; } }
img, video, svg, canvas, iframe { max-width: 100%; display: block; }
img { height: auto; }
h1, h2, h3, h4 { font-family: var(--fonte-titulo); line-height: 1.12; margin: 0 0 .5em; text-wrap: balance; letter-spacing: -.01em; }
h1 { font-size: clamp(32px, 6vw, 68px); }
h2 { font-size: clamp(26px, 4vw, 44px); }
h3 { font-size: clamp(18px, 2.2vw, 22px); }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--cor-2); outline-offset: 3px; border-radius: 6px; }
:focus:not(:focus-visible) { outline: none; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nowrap { white-space: nowrap; }          /* numero + unidade, telefone, e-mail */
.container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }
.centro { text-align: center; }

/* ---------- Secoes alternando claro / escuro ---------- */
.secao { padding-block: var(--secao-y); position: relative; }
.secao.escura { background: var(--escuro); color: var(--texto-claro); }
.secao.escura p { color: rgba(255,255,255,.82); }
.secao.clara-2 { background: var(--claro-2); }
.secao-titulo { max-width: 760px; margin: 0 auto clamp(22px, 3.5vw, 40px); text-align: center; }
.secao-titulo p { color: var(--texto-suave); font-size: clamp(15px, 1.6vw, 18px); }
.secao.escura .secao-titulo p { color: rgba(255,255,255,.75); }
/* palavra de destaque no titulo (sem etiquetas/rotulos acima do titulo) */
.destaque { color: var(--cor-1); }
.secao.escura .destaque { color: var(--cor-2); }

/* ---------- Botoes (nunca quebram em duas linhas) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 46px; padding: 0 22px; border-radius: 999px; border: 0;
  background: var(--cor-1); color: #fff; font-weight: 600; font-size: 15px;
  text-decoration: none; white-space: nowrap; transition: transform .2s, background .2s, box-shadow .2s;
}
.btn:hover { transform: translateY(-2px); background: var(--cor-1-escura); box-shadow: 0 10px 24px rgba(4,66,210,.28); }
.btn.contorno { background: transparent; color: currentColor; box-shadow: inset 0 0 0 2px currentColor; }
.btn.wa { background: var(--wa); color: #06331a; }
.btn svg { width: 20px; height: 20px; flex: none; }
.botoes { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
@media (max-width: 380px) { .btn { padding: 0 16px; font-size: 14px; } }

/* ---------- Aparecer ao rolar (so sobe; nunca entra de lado) ---------- */
.js .revela { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.js .revela.visivel { opacity: 1; transform: none; }
/* sem JavaScript tudo aparece. No <head>: <script>document.documentElement.classList.add('js')</script> */
@media (prefers-reduced-motion: reduce) {
  .js .revela { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* ---------- Foto inteira sobre copia desfocada (nunca corta rosto/texto) ----------
   <div class="foto-inteira" style="aspect-ratio:4/3"><img src="..." alt="..."></div>
   O kit JS duplica a imagem como fundo desfocado. */
.foto-inteira { position: relative; overflow: hidden; border-radius: var(--raio); background: #111; }
.foto-inteira > img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; }
.foto-inteira > img.fundo { position: absolute; inset: -6%; width: 112%; height: 112%; max-width: none; object-fit: cover; filter: blur(22px) saturate(1.1) brightness(.75); z-index: 0; }

/* ---------- Cabecalho ---------- */
.topo-barra {
  position: fixed; inset: 0 0 auto 0; height: var(--topo-h); z-index: 50;
  display: flex; align-items: center; transition: background .3s, box-shadow .3s;
}
.topo-barra.rolou { background: rgba(1,1,25,.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 6px 24px rgba(0,0,0,.18); }
.topo-barra .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.topo-barra .logo img { height: 38px; width: auto; }
.topo-barra nav { display: flex; gap: 22px; }
.topo-barra nav a { color: #fff; text-decoration: none; font-size: 14px; font-weight: 500; white-space: nowrap; opacity: .9; }
.topo-barra nav a:hover, .topo-barra nav a.ativo { opacity: 1; color: var(--cor-2); }
.btn-menu { display: none; width: 46px; height: 46px; border-radius: 12px; border: 0; background: rgba(255,255,255,.12); color: #fff; align-items: center; justify-content: center; }
@media (max-width: 1023px) { .topo-barra nav { display: none; } .btn-menu { display: inline-flex; } }

/* ---------- Topo (hero) com video de ponta a ponta ---------- */
.hero { position: relative; min-height: 100svh; display: grid; place-items: center; text-align: center; color: #fff; overflow: hidden; background: var(--escuro); }
.hero-fundo, .hero-fundo video, .hero-fundo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-fundo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(1,1,25,.55), rgba(1,1,25,.35) 40%, rgba(1,1,25,.85)); }
.hero .so-pc { display: block; } .hero .so-cel { display: none; }
@media (max-aspect-ratio: 4/5) { .hero .so-pc { display: none; } .hero .so-cel { display: block; } }
.hero-conteudo { position: relative; z-index: 2; padding: calc(var(--topo-h) + 24px) var(--gutter) 64px; max-width: 980px; }
.hero h1 { color: #fff; }
.hero p.sub { font-size: clamp(16px, 2vw, 20px); color: rgba(255,255,255,.85); max-width: 680px; margin-inline: auto; }
.troca { color: var(--cor-2); white-space: nowrap; }
.troca::after { content: ""; display: inline-block; width: .06em; height: .9em; margin-left: .06em; background: currentColor; vertical-align: -.08em; animation: pisca 1s steps(1) infinite; }
@keyframes pisca { 50% { opacity: 0; } }
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: 100svh; } .hero h1 { font-size: clamp(26px, 5vw, 40px); } .hero-conteudo { padding-bottom: 28px; }
}

/* ---------- Cartao de numeros sobreposto ao topo ----------
   Use dentro de uma .ponte logo depois do .hero: fica metade no topo e metade na secao seguinte. */
.hero:has(+ .ponte) .hero-conteudo { padding-bottom: calc(var(--ponte-sobra, 60px) + 40px); }
.numeros-card { background: #fff; color: var(--texto); border-radius: 20px; box-shadow: var(--sombra); display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; padding: 22px; }
.numeros-card div { text-align: center; padding: 6px; }
.numeros-card strong { display: block; font-family: var(--fonte-titulo); font-size: clamp(22px, 3vw, 34px); color: var(--cor-1); white-space: nowrap; }
.numeros-card span { font-size: 13px; color: var(--texto-suave); }
@media (max-width: 640px) { .numeros-card { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* ---------- Faixa infinita (marcas, depoimentos) ----------
   O kit JS repete o conteudo ate cobrir 2x a largura da tela (sem vao em 2560/3440 px). */
.faixa-infinita { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.faixa-infinita .trilho { display: flex; width: max-content; gap: var(--gap, 48px); animation: desliza var(--duracao, 40s) linear infinite; }
.faixa-infinita:hover .trilho { animation-play-state: paused; }
.faixa-infinita .trilho > * { flex: none; }
.faixa-infinita img { height: 44px; width: auto; max-width: 160px; object-fit: contain; filter: grayscale(1) opacity(.7); transition: filter .2s; }
.faixa-infinita img:hover { filter: none; }
@keyframes desliza { to { transform: translateX(var(--desloc, -50%)); } }

/* ---------- Faixa de videos de ponta a ponta (9:16, rodando sozinhos) ---------- */
.faixa-videos { position: relative; overflow: hidden; padding-block: 8px; }
.faixa-videos .trilho { display: flex; width: max-content; gap: 10px; animation: desliza var(--duracao, 90s) linear infinite; }
.faixa-videos.pausada .trilho, .faixa-videos:hover .trilho { animation-play-state: paused; }
.cartao-video { position: relative; flex: none; width: clamp(150px, 19vw, 250px); aspect-ratio: 9/16; border-radius: 14px; overflow: hidden; background: #0b0b18; border: 0; padding: 0; color: #fff; text-align: left; }
.cartao-video video, .cartao-video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cartao-video .legenda { position: absolute; inset: auto 0 0 0; padding: 40px 12px 12px; font-size: 13px; font-weight: 600; line-height: 1.3; background: linear-gradient(transparent, rgba(0,0,0,.78)); z-index: 2; }
.cartao-video:hover video { transform: scale(1.04); transition: transform .6s; }

/* ---------- Player grande (camada) ---------- */
.camada { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; background: rgba(1,1,25,.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 16px; }
.camada.aberta { display: flex; }
.camada .fechar { position: absolute; top: 12px; right: 12px; width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 26px; line-height: 1; z-index: 3; }
.player-caixa { position: relative; height: min(86svh, 820px); aspect-ratio: 9/16; max-width: 100%; border-radius: 18px; overflow: hidden; background: #000; }
.player-caixa video { width: 100%; height: 100%; object-fit: contain; }
.player .seta { position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; border-radius: 50%; border: 0; background: rgba(255,255,255,.16); color: #fff; font-size: 26px; z-index: 3; }
.player .seta.ant { left: max(12px, calc(50% - min(86svh, 820px) * 9 / 32 - 70px)); }
.player .seta.prox { right: max(12px, calc(50% - min(86svh, 820px) * 9 / 32 - 70px)); }
.player .cta { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 3; }
@media (max-width: 700px) { .player .seta { top: auto; bottom: 22px; transform: none; } .player .cta { bottom: 84px; } }
@media (max-height: 500px) and (orientation: landscape) { .player-caixa { height: 92svh; } .player .cta { bottom: 12px; } }

/* ---------- Banner em cartao entre secoes (metade em cada uma) ----------
   <div class="ponte"><div class="container"><div class="cartao-banner borda-luz">...</div></div></div>
   O kit JS mede a altura e ajusta --ponte-sobra. */
.ponte { position: relative; z-index: 4; margin-block: calc(-1 * var(--ponte-sobra, 90px)); }
.secao:has(+ .ponte) { padding-bottom: calc(var(--secao-y) + var(--ponte-sobra, 90px)); }
.ponte + .secao { padding-top: calc(var(--secao-y) + var(--ponte-sobra, 90px)); }
.cartao-banner { position: relative; border-radius: 22px; overflow: hidden; background: var(--escuro-2); color: #fff; box-shadow: var(--sombra); display: grid; grid-template-columns: 1.4fr 1fr; align-items: center; }
.cartao-banner .arte { position: relative; min-height: 100%; }
.cartao-banner .arte img { width: 100%; height: 100%; object-fit: contain; }
.cartao-banner .texto { padding: clamp(18px, 3vw, 34px); }
.cartao-banner .texto h3 { font-size: clamp(20px, 2.6vw, 30px); }
@media (max-width: 760px) { .cartao-banner { grid-template-columns: 1fr; } .cartao-banner .texto { text-align: center; } }
/* borda luminosa animada */
@property --ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.borda-luz { isolation: isolate; }
.borda-luz::before { content: ""; position: absolute; inset: 0; padding: 2px; border-radius: inherit; z-index: 5; pointer-events: none;
  background: conic-gradient(from var(--ang), transparent 0 55%, var(--cor-2) 70%, #fff 75%, var(--cor-2) 80%, transparent 95%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: gira-borda 5s linear infinite; }
.borda-luz::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.12) 50%, transparent 65%); background-size: 250% 100%; animation: brilho 6s ease-in-out infinite; }
@keyframes gira-borda { to { --ang: 360deg; } }
@keyframes brilho { 0%, 60% { background-position: 150% 0; } 100% { background-position: -100% 0; } }

/* ---------- Cartoes genericos ---------- */
.grade { display: grid; gap: clamp(12px, 2vw, 20px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.cartao { background: #fff; border-radius: var(--raio); box-shadow: 0 6px 24px rgba(1,1,25,.08); padding: 20px; transition: transform .25s, box-shadow .25s; min-width: 0; }
.cartao:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(1,1,25,.14); }
.secao.escura .cartao { background: var(--escuro-2); color: #fff; }

/* ---------- Contato ---------- */
/* a coluna de canais acompanha a altura da coluna vizinha (formulario): o mapa cresce e nao sobra vazio */
.canais { display: grid; gap: 12px; align-content: start; grid-template-rows: auto; }
.grade > .canais:not(:only-child) { grid-auto-rows: max-content; align-content: stretch; }
.grade > .canais:not(:only-child) > .mapa-toque { aspect-ratio: auto; min-height: 180px; height: 100%; }
.canal { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--claro-2); min-width: 0; }
.canal .valor { font-weight: 600; min-width: 0; flex: 1; overflow-wrap: anywhere; }  /* telefone: use class nowrap */
.copiar { flex: none; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--cinza); background: #fff; font-size: 13px; white-space: nowrap; }
.copiar.ok { background: var(--cor-1); border-color: var(--cor-1); color: #fff; }
.status-horario { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.status-horario::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #c0392b; }
.status-horario.aberto::before { background: var(--wa); box-shadow: 0 0 0 4px rgba(37,211,102,.2); }
.form-wa { display: grid; gap: 12px; }
.form-wa label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
.form-wa input, .form-wa select, .form-wa textarea { font: inherit; font-size: 16px; padding: 12px 14px; border-radius: 12px; border: 1px solid #cfd2dc; background: #fff; width: 100%; min-width: 0; }
.mapa-toque { position: relative; border-radius: var(--raio); overflow: hidden; aspect-ratio: 16/10; background: var(--escuro-2); color: #fff; border: 0; width: 100%; display: grid; place-items: center; }
.mapa-toque iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
details.faq { border-bottom: 1px solid #e3e5ec; padding: 14px 0; }
details.faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
details.faq summary::after { content: "+"; font-size: 22px; line-height: 1; }
details.faq[open] summary::after { content: "\2212"; }

/* ---------- Menu do celular em cartoes numerados ---------- */
.menu-cel { position: fixed; inset: 0; z-index: 150; background: var(--escuro); color: #fff; display: none; flex-direction: column; padding: calc(var(--topo-h) + 8px) var(--gutter) 20px; overflow-y: auto; overscroll-behavior: contain; }
.menu-cel.aberta { display: flex; }
.menu-cel .fechar { position: absolute; top: 11px; right: var(--gutter); width: 46px; height: 46px; border-radius: 12px; border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 26px; }
.menu-cel ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: 1fr 1fr; counter-reset: m; }
.menu-cel li a { counter-increment: m; display: flex; flex-direction: column; gap: 2px; min-height: 64px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.07); text-decoration: none; font-weight: 600; font-size: 15px; }
.menu-cel li a::before { content: counter(m, decimal-leading-zero); font-size: 12px; color: var(--cor-2); font-weight: 700; }
.menu-cel .menu-acoes { margin-top: auto; padding-top: 16px; display: grid; gap: 10px; }
@media (max-height: 620px) { .menu-cel li a { min-height: 48px; padding: 8px 12px; } }
@media (orientation: landscape) and (max-height: 500px) { .menu-cel ol { grid-template-columns: repeat(3, 1fr); } .menu-cel .menu-acoes { grid-template-columns: 1fr 1fr; } }

/* ---------- Barra inferior fixa (so celular) ---------- */
.barra-cel { display: none; }
@media (max-width: 899px) {
  .barra-cel { position: fixed; inset: auto 0 0 0; z-index: 60; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; height: calc(var(--barra-cel-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: rgba(1,1,25,.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform .25s; }
  .barra-cel a, .barra-cel button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #fff; text-decoration: none; font-size: 11px; font-weight: 600; background: none; border: 0; min-width: 0; }
  .barra-cel svg { width: 22px; height: 22px; }
  .barra-cel .wa { color: var(--wa); }
  body { padding-bottom: calc(var(--barra-cel-h) + env(safe-area-inset-bottom)); }
  body.camada-aberta .barra-cel { transform: translateY(110%); }
}

/* ---------- WhatsApp flutuante (so tablet/computador) ---------- */
.wa-flutuante { position: fixed; right: 22px; bottom: 22px; z-index: 55; width: 58px; height: 58px; border-radius: 50%; background: var(--wa); color: #fff; display: none; align-items: center; justify-content: center; box-shadow: 0 10px 28px rgba(0,0,0,.25); transition: opacity .25s, transform .25s; }
.wa-flutuante svg { width: 30px; height: 30px; }
@media (min-width: 900px) { .wa-flutuante { display: flex; } }
.wa-flutuante.escondido { opacity: 0; transform: scale(.6); pointer-events: none; }

/* ---------- Aviso de cookies (so quando ha GTM/GA4/Pixel) ---------- */
.cookies { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 70; max-width: 560px; margin-inline: auto; background: #fff; color: var(--texto); border-radius: 16px; box-shadow: var(--sombra); padding: 16px; display: none; gap: 12px; align-items: center; font-size: 14px; }
.cookies.aberta { display: flex; }
.cookies p { margin: 0; }
@media (max-width: 899px) { .cookies { bottom: calc(var(--barra-cel-h) + 10px + env(safe-area-inset-bottom)); flex-direction: column; text-align: center; } }
body.camada-aberta .cookies { display: none; }

/* ---------- Rodape com credito VOWT (obrigatorio) ---------- */
.rodape { background: var(--escuro); color: rgba(255,255,255,.78); padding: 40px 0 24px; font-size: 14px; }
.rodape a { color: #fff; }
.rodape-vowt { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 24px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); font-size: 13px; }
.rodape-vowt a { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 2px; text-decoration: none; }
.rodape-vowt img { height: 20px; width: auto; }

/* ---------- Tela de abertura ---------- */
.abertura { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; background: var(--escuro); transition: opacity .6s, visibility .6s; }
.abertura img { width: min(220px, 50vw); animation: pulsa 1.6s ease-in-out infinite; }
.abertura.saiu { opacity: 0; visibility: hidden; }
@keyframes pulsa { 50% { transform: scale(1.05); opacity: .85; } }

/* ---------- Lista de orcamento ---------- */
.lista-painel { align-items: flex-end; }
@media (min-width: 700px) { .lista-painel { align-items: center; } }
.lista-caixa { position: relative; width: min(520px, 100%); max-height: 86svh; overflow: auto; background: #fff; color: var(--texto); border-radius: 20px; padding: 22px; }
.lista-caixa .fechar { background: var(--claro-2); color: var(--texto); }
.lista-itens { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.lista-itens li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--claro-2); }
.lista-itens .nome { min-width: 0; font-weight: 600; font-size: 14px; }
.lista-itens .qtd { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.lista-itens .qtd button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--cinza); background: #fff; font-size: 18px; line-height: 1; }
[data-abre-lista] [data-lista-conta] { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--wa); color: #06331a; font-size: 12px; font-weight: 700; }
.aviso-curto { position: fixed; left: 50%; top: calc(var(--topo-h) + 10px); z-index: 120; transform: translate(-50%, -16px); opacity: 0; pointer-events: none; background: var(--escuro-2); color: #fff; padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; transition: opacity .25s, transform .25s; max-width: calc(100vw - 32px); text-align: center; }
.aviso-curto.aberta { opacity: 1; transform: translate(-50%, 0); }
body.camada-aberta .aviso-curto { display: none; }

/* ---------- Cena 3D (vowt-3d.js) ---------- */
.cena-3d { position: relative; width: 100%; border-radius: var(--raio); overflow: hidden; background: radial-gradient(120% 90% at 50% 20%, #1d2142, var(--escuro)); }
.cena-3d .reserva-3d { display: none; width: 100%; height: 100%; object-fit: contain; }
.cena-3d.sem-3d .reserva-3d { display: block; }
.cena-3d canvas:active { cursor: grabbing; }
/* Maxcell - estilos proprios. Paleta da LOGO: verde #8FB51E + grafite/preto. Fontes Sora (titulos) e Inter (texto). */
:root {
  --cor-1: #8FB51E;
  --cor-1-escura: #7FA216;
  --cor-2: #8FB51E;
  --verde: #8FB51E;
  --verde-vivo: #A4CE2A;     /* so para brilho sobre o preto */
  --verde-texto: #5A780C;    /* verde legivel sobre o branco */
  --escuro: #0B0D0A;
  --escuro-2: #151913;
  --escuro-3: #1D221A;
  --claro: #FFFFFF;
  --claro-2: #F2F4EE;
  --texto: #151913;
  --texto-suave: #4D5447;
  --linha: #262B22;
  --linha-clara: #E3E7DC;
  --cinza: #B6BBAE;
  --fonte-titulo: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fonte-texto: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --sombra: 0 18px 50px rgba(11, 13, 10, .18);
}
h1, h2, h3 { font-weight: 700; }
h2 { letter-spacing: -.02em; }
.destaque { color: var(--verde-texto); }
.secao.escura .destaque, .hero .destaque { color: var(--verde); }
.btn { color: var(--escuro); font-weight: 700; }
.btn:hover { background: var(--verde-vivo); box-shadow: 0 10px 26px rgba(143, 181, 30, .32); }
.btn.contorno:hover { background: rgba(143, 181, 30, .12); box-shadow: inset 0 0 0 2px var(--verde); }
.btn.wa { background: #25D366; color: #06331a; }
.btn.wa:hover { background: #3be07a; box-shadow: 0 10px 26px rgba(37, 211, 102, .3); }
.btn.mini { min-height: 38px; padding: 0 14px; font-size: 13.5px; }
.btn.mini svg { width: 16px; height: 16px; }
.so-desk { display: none; }
@media (min-width: 700px) { .so-desk { display: inline-flex; } } /* tablet tambem: no tablet o flutuante quase sempre teria conteudo embaixo */

/* ---------- Cabecalho ---------- */
.topo-barra.rolou { background: rgba(11, 13, 10, .9); }
.topo-barra .logo { display: inline-flex; align-items: center; min-height: 44px; }
.topo-barra .logo img { height: 28px; width: auto; }
.topo-barra nav { gap: 20px; }
.topo-barra nav a:hover, .topo-barra nav a.ativo { color: var(--verde); }
.topo-acoes { display: flex; align-items: center; gap: 10px; }
.topo-acoes .btn { min-height: 42px; padding: 0 18px; }
@media (max-width: 1199px) { .topo-barra nav { display: none; } .btn-menu { display: inline-flex; } }
@media (max-width: 899px) { .topo-acoes { gap: 8px; } }

/* ---------- Topo: parede de fotos reais ---------- */
.hero { min-height: 100svh; }
.hero-fundo { perspective: 1400px; overflow: hidden; }
.hero-fundo::after { display: none; }
.parede { position: absolute; inset: -18% -12%; display: flex; gap: 14px; transform: rotateX(16deg) rotateZ(-7deg) scale(1.08); transform-origin: 50% 40%; }
.parede-col { flex: 1; min-width: 0; overflow: hidden; }
.parede-trilho { display: flex; flex-direction: column; gap: 14px; animation: parede-sobe var(--dur, 80s) linear infinite; will-change: transform; }
.parede-col.desce .parede-trilho { animation-name: parede-desce; }
.parede-trilho img { position: static; width: 100%; height: auto; aspect-ratio: 495 / 896; object-fit: cover; border-radius: 16px; }
.parede.pausada .parede-trilho { animation-play-state: paused; }
@keyframes parede-sobe { from { transform: translateY(0); } to { transform: translateY(calc(-50% - 7px)); } }
@keyframes parede-desce { from { transform: translateY(calc(-50% - 7px)); } to { transform: translateY(0); } }
.parede-luz { position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(60% 55% at 50% 48%, rgba(11, 13, 10, .62), rgba(11, 13, 10, .86) 70%, rgba(11, 13, 10, .95)),
              linear-gradient(180deg, rgba(11, 13, 10, .7), transparent 25%, transparent 70%, var(--escuro)); }
.parede-luz::after { content: ""; position: absolute; left: 50%; top: 46%; width: min(820px, 120vw); aspect-ratio: 2 / 1; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(143, 181, 30, .16), transparent); }
.hero-conteudo { max-width: 920px; }
.hero h1 { font-size: clamp(34px, 6.4vw, 74px); font-weight: 800; letter-spacing: -.03em; }
.hero h1 .destaque { text-shadow: 0 0 34px rgba(143, 181, 30, .45); }
.hero p.sub { font-size: clamp(16px, 1.9vw, 20px); }
.hero .btn.contorno { color: #fff; }
.hero-x { width: clamp(54px, 7vw, 76px); height: auto; margin: 0 auto 18px; overflow: visible; filter: drop-shadow(0 0 18px rgba(143, 181, 30, .45)); }
.hero-x path { fill: none; stroke-width: 30; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: desenha .9s ease forwards; }
.hero-x .x-c { stroke: #fff; }
.hero-x .x-v { stroke: var(--verde); animation-duration: .5s; animation-delay: .7s; }
.hero-x .x-b { animation-delay: .9s; }
@keyframes desenha { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .parede-trilho { animation: none; } .hero-x path { stroke-dashoffset: 0; animation: none; } }
@media (max-height: 520px) and (orientation: landscape) {
  .hero-x { display: none; }
  .hero h1 { font-size: clamp(24px, 4.2vw, 34px); }
  .hero p.sub { font-size: 15px; margin-bottom: 14px; }
  .hero-conteudo, .hero:has(+ .ponte) .hero-conteudo { padding: calc(var(--topo-h) + 8px) var(--gutter) calc(var(--barra-cel-h) + 16px); }
}

/* ---------- Atalhos (.ponte) ---------- */
.atalhos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; padding: 10px; background: #fff; border-radius: 22px; box-shadow: var(--sombra); }
.atalhos a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 92px; padding: 12px 6px; border-radius: 16px; text-decoration: none; color: var(--texto); font-weight: 600; font-size: 14px; line-height: 1.25; text-align: center; white-space: nowrap; transition: background .2s, transform .2s; }
.atalhos a:hover { background: var(--claro-2); transform: translateY(-2px); }
.atalhos svg { width: 30px; height: 30px; fill: none; stroke: var(--verde-texto); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.atalhos a:hover svg { stroke: var(--verde); }
@media (max-width: 760px) {
  .atalhos { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 8px; gap: 4px; }
  .atalhos a { min-height: 78px; font-size: 12.5px; gap: 6px; padding: 10px 4px; }
  .atalhos svg { width: 26px; height: 26px; }
}
@media (max-width: 359px) { .atalhos a { font-size: 12px; } }

/* ---------- Videos ---------- */
#videos .secao-titulo { margin-bottom: clamp(18px, 3vw, 30px); }

/* ---------- Categorias: cartoes 3:4 (as fotos sao capas de reels 9:16; o enquadramento de cada uma fica em dados.js) ---------- */
.bento { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cat { position: relative; display: flex; align-items: flex-end; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 20px; background: #111; color: #fff; text-decoration: none; isolation: isolate; }
.cat > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .8s ease; }
.cat:hover > img, .cat:hover .cat-produtos img { transform: scale(1.05); }
.cat::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11, 13, 10, 0) 45%, rgba(11, 13, 10, .9)); }
.cat.sombra::after { background: linear-gradient(180deg, rgba(11, 13, 10, 0) 25%, rgba(11, 13, 10, .82) 55%, rgba(11, 13, 10, .95)); } /* v2: texto branco sobre as caixas brancas dos carregadores */
.cat-texto { display: grid; gap: 4px; padding: 16px 62px 18px 18px; }
.cat-texto b { font-family: var(--fonte-titulo); font-size: clamp(16px, 1.7vw, 21px); line-height: 1.15; }
.cat-texto span { font-size: 13.5px; line-height: 1.4; color: rgba(255, 255, 255, .84); }
.cat-seta { position: absolute; right: 14px; bottom: 16px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--verde); color: var(--escuro); transition: transform .25s; }
.cat-seta svg { width: 19px; height: 19px; }
.cat:hover .cat-seta { transform: scale(1.1); }
/* produtos recortados (linha gamer) sobre fundo claro */
.cat.clara { background: linear-gradient(160deg, #F6F8F1, #E5EADC); color: var(--texto); }
.cat.clara::after { background: linear-gradient(180deg, rgba(229, 234, 220, 0) 58%, rgba(229, 234, 220, .96) 80%); }
.cat.clara .cat-texto span { color: var(--texto-suave); }
.cat-produtos { position: absolute; inset: 6% 6% 26% 6%; }
.cat-produtos img { position: absolute; z-index: -2; mix-blend-mode: multiply; height: auto; object-fit: contain; transition: transform .8s ease; }
.cat-produtos.n3 img:nth-child(1) { left: 0; top: 2%; width: 58%; }
.cat-produtos.n3 img:nth-child(2) { right: 0; top: 0; width: 52%; }
.cat-produtos.n3 img:nth-child(3) { left: 6%; bottom: -16%; width: 88%; }
/* arte quadrada do proprio cliente (PC gamer): inteira, sem corte, sobre o fundo escuro da arte */
.cat.arte { background: #060a07; }
.cat.arte .cat-produtos { inset: 0 0 auto 0; aspect-ratio: 1; z-index: -2; }
.cat.arte .cat-produtos img { position: static; mix-blend-mode: normal; width: 100%; height: 100%; }
@media (min-width: 1000px) { .cat-texto span { min-height: 4.2em; } }
@media (max-width: 999px) {
  .cat-texto span { display: none; }
  .cat-texto { padding: 12px 14px 14px; }
  .cat-texto b { font-size: 16px; }
  .cat-seta { width: 32px; height: 32px; right: 10px; top: 10px; bottom: auto; }
  .cat-seta svg { width: 16px; height: 16px; }
}
@media (max-width: 400px) { .cat-texto b { font-size: 14.5px; } }
@media (max-width: 560px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

/* ---------- Marcas ---------- */
.secao.marcas { padding-block: 26px 30px; }
.secao.marcas:has(+ .ponte) { padding-bottom: calc(30px + var(--ponte-sobra, 90px)); } /* v2: ordem nova, o banner vem logo depois */
.marcas-titulo { text-align: center; font-size: 14px; color: var(--texto-suave); margin: 0 0 14px; }
.marcas .faixa-infinita img { width: auto; height: 40px; max-width: 150px; filter: grayscale(1) opacity(.62); }
.marcas .faixa-infinita img.larga { height: 24px; }
.marcas .faixa-infinita img.m-apple { height: 34px; }
.marcas .faixa-infinita img.m-xiaomi { height: 34px; }
.marcas .faixa-infinita img.m-jbl { height: 40px; }
.marcas .faixa-infinita img.m-samsung { height: 26px; }
.marcas .faixa-infinita img.m-sony { height: 15px; }
.marcas .faixa-infinita img.m-bambu { height: 30px; }
.marcas .faixa-infinita img.m-lianli { height: 22px; }
.marcas .faixa-infinita img.m-trust { height: 24px; }
.marcas .faixa-infinita img:hover { filter: none; }
.marcas .faixa-infinita .trilho { --gap: 64px; align-items: center; }

/* ---------- Lojas ---------- */
.lojas { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.loja { display: flex; flex-direction: column; background: var(--escuro-2); border: 1px solid var(--linha); border-radius: 20px; overflow: hidden; transition: border-color .3s, box-shadow .3s; min-width: 0; }
/* v2: a secao das lojas ficou clara (ordem nova); o cartao continua escuro e leva a propria cor de texto */
.loja { color: #fff; }
.loja-corpo p { color: rgba(255, 255, 255, .82); }
.loja.escolhida { border-color: var(--verde); box-shadow: 0 0 0 1px var(--verde), 0 14px 40px rgba(143, 181, 30, .16); }
.loja-foto { aspect-ratio: 5 / 4; border-radius: 0; position: relative; overflow: hidden; background: #0b0d0a; }
/* v2: a foto preenche o quadro (antes: capa 9:16 inteira com faixas desfocadas dos lados) */
.loja-foto:not(.foto-inteira) > img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.loja:hover .loja-foto:not(.foto-inteira) > img { transform: scale(1.04); }
.loja-corpo { display: flex; flex-direction: column; gap: 6px; padding: 16px 16px 18px; flex: 1; }
.loja-corpo h3 { margin: 0; font-size: 19px; }
.loja-corpo p { margin: 0; }
.loja-onde { color: var(--verde) !important; font-weight: 600; font-size: 14px; }
.loja .status-horario { font-size: 13px; color: #fff; }
.loja-end { font-size: 14px; }
.loja-hora, .loja-tel { font-size: 13.5px; color: rgba(255, 255, 255, .7) !important; }
.loja-acoes { display: flex; gap: 8px; margin-top: auto; padding-top: 12px; }
.loja-acoes .btn { flex: 1; min-width: 0; padding: 0 12px; }
.icone-btn { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; border: 1px solid rgba(255, 255, 255, .22); transition: background .2s, border-color .2s; }
.icone-btn:hover { background: rgba(143, 181, 30, .16); border-color: var(--verde); }
.icone-btn svg { width: 20px; height: 20px; }
@media (max-width: 1099px) { .lojas { grid-template-columns: repeat(2, minmax(0, 1fr)); } .loja-foto { aspect-ratio: 16 / 10; } }
@media (max-width: 360px) { .loja-acoes { gap: 6px; } .loja-acoes .btn { padding: 0 10px; font-size: 14px; } .icone-btn { width: 40px; height: 40px; } }
@media (max-width: 640px) {
  .lojas { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 6px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .lojas::-webkit-scrollbar { display: none; }
  .loja { flex: 0 0 min(84%, 330px); scroll-snap-align: center; }
  .loja-foto { aspect-ratio: 4 / 3; }
}

/* ---------- Impressao 3D ---------- */
.i3d-grade { display: grid; gap: 24px; grid-template-columns: 1fr 1fr; align-items: stretch; }
.i3d-fotos { display: grid; gap: 12px; grid-template-columns: 1.15fr 1fr; min-height: 440px; }
.i3d-col { display: grid; gap: 12px; grid-template-rows: 1fr 1fr; }
.i3d-foto { position: relative; overflow: hidden; border-radius: 18px; background: #111; }
.i3d-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s; }
.i3d-foto:hover img { transform: scale(1.04); }
.i3d-painel { display: flex; flex-direction: column; gap: 16px; }
.i3d-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.i3d-lista li { position: relative; display: grid; gap: 2px; padding: 12px 14px 12px 46px; border-radius: 14px; background: var(--claro-2); }
.i3d-lista li::before { content: ""; position: absolute; left: 14px; top: 15px; width: 20px; height: 20px; border-radius: 50%; background: var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0D0A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 14px no-repeat; }
.i3d-lista li { color: var(--texto); }
.i3d-lista b { font-size: 15.5px; }
.i3d-lista span { font-size: 14px; color: var(--texto-suave); }
.carretel-caixa { display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: center; margin-top: auto; padding: 16px; border-radius: 18px; background: var(--escuro); color: #fff; }
.carretel-cena { width: 150px; height: 150px; perspective: 600px; display: grid; place-items: center; }
.carretel { position: relative; width: 132px; height: 132px; transform-style: preserve-3d; animation: carretel-gira 6s ease-in-out infinite alternate; }
@keyframes carretel-gira { from { transform: rotateX(8deg) rotateY(-38deg); } to { transform: rotateX(8deg) rotateY(38deg); } }
.carretel > span { position: absolute; inset: 0; border-radius: 50%; }
.car-disco { background: radial-gradient(circle, transparent 0 17%, #2c302a 17.5% 23%, rgba(44, 48, 42, .55) 23.5% 96%, #3a3f37 97%); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12); }
.car-disco::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(rgba(255, 255, 255, .08) 0 6deg, transparent 6deg 60deg); -webkit-mask: radial-gradient(circle, transparent 0 30%, #000 31% 88%, transparent 89%); mask: radial-gradient(circle, transparent 0 30%, #000 31% 88%, transparent 89%); }
.car-frente { transform: translateZ(26px); }
.car-tras { transform: translateZ(-26px); }
.car-fio { inset: 10% !important; background: radial-gradient(circle, transparent 0 26%, var(--fil) 27%), repeating-radial-gradient(circle, rgba(0, 0, 0, .14) 0 1px, transparent 1px 4px); background-blend-mode: multiply; transition: background-color .4s; }
.car-fio { background: repeating-radial-gradient(circle, rgba(0, 0, 0, .16) 0 1px, transparent 1px 4px), radial-gradient(circle, transparent 0 26%, var(--fil) 27%); }
.car-fio:nth-child(2) { transform: translateZ(-18px); filter: brightness(.7); }
.car-fio:nth-child(3) { transform: translateZ(-9px); filter: brightness(.8); }
.car-fio:nth-child(4) { transform: translateZ(0); filter: brightness(.9); }
.car-fio:nth-child(5) { transform: translateZ(9px); filter: brightness(.95); }
.car-fio:nth-child(6) { transform: translateZ(18px); }
.carretel-rotulo { margin: 0 0 10px; font-size: 14px; color: rgba(255, 255, 255, .8); }
.carretel-rotulo b { color: #fff; }
.fil-cores { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.fil-cores button { width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--c); box-shadow: 0 0 0 2px var(--escuro), 0 0 0 3px rgba(255, 255, 255, .25); transition: box-shadow .2s, transform .2s; }
.fil-cores button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--escuro), 0 0 0 4px var(--verde); transform: scale(1.08); }
.carretel-botoes { display: flex; flex-wrap: wrap; gap: 8px; }
.carretel-botoes .btn { min-height: 42px; padding: 0 16px; font-size: 14px; }
.carretel-botoes .btn.contorno { color: #fff; }
.secao.escura .carretel-caixa { background: var(--escuro-2); border: 1px solid var(--linha); }
@media (prefers-reduced-motion: reduce) { .carretel { animation: none; transform: rotateX(8deg) rotateY(-30deg); } }
@media (max-width: 899px) { .i3d-grade { grid-template-columns: 1fr; } .i3d-fotos { min-height: 0; height: 360px; } }
/* tablet e celular deitado: as tres fotos lado a lado, todas em pe (sem corte grande) */
@media (min-width: 561px) and (max-width: 899px) { .i3d-fotos { grid-template-columns: 1fr 2fr; } .i3d-col { grid-template-rows: none; grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .carretel-caixa { grid-template-columns: 1fr; justify-items: center; text-align: center; } .fil-cores, .carretel-botoes { justify-content: center; } .fil-cores { display: grid; grid-template-columns: repeat(5, 32px); } .i3d-fotos { height: 300px; } }

/* ---------- Quem somos ---------- */
.sobre-grade { display: grid; gap: clamp(22px, 4vw, 48px); grid-template-columns: .85fr 1.15fr; align-items: stretch; }
.sobre-foto { height: 100%; }
/* v2: uma foto por aba (missao, visao, objetivos); a da aba escolhida aparece com um zoom leve */
.sobre-fotos { position: relative; height: 100%; min-height: 420px; border-radius: var(--raio); overflow: hidden; background: #111; }
.sobre-fotos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .6s ease, transform 1.4s ease; }
.sobre-fotos img.ativa { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .sobre-fotos img { transition: none; transform: none; } }
.sobre-texto h2 { margin-bottom: 14px; }
.sobre-lead { font-size: clamp(16px, 1.6vw, 18px); color: rgba(255, 255, 255, .88) !important; }
.abas { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .07); margin: 6px 0 14px; }
.abas button { min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: rgba(255, 255, 255, .8); font-weight: 600; font-size: 14px; }
.abas button[aria-selected="true"] { background: var(--verde); color: var(--escuro); }
.aba-painel { display: none; min-height: 104px; }
.aba-painel.ativo { display: block; animation: sobe-leve .35s ease; }
@keyframes sobe-leve { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.aba-painel p { font-size: 16px; }
.objetivos { list-style: none; margin: 0 0 1em; padding: 0; display: grid; gap: 6px; }
.objetivos li { position: relative; padding-left: 26px; color: rgba(255, 255, 255, .86); font-size: 15px; }
.objetivos li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 12px; height: 7px; border-left: 2.5px solid var(--verde); border-bottom: 2.5px solid var(--verde); transform: rotate(-45deg); }
.valores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 6px 0 16px; }
.valores div { display: grid; gap: 2px; padding: 14px 12px; border-radius: 16px; background: var(--escuro-2); border: 1px solid var(--linha); }
.valores svg { width: 28px; height: 28px; fill: none; stroke: var(--verde); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 6px; }
.valores b { font-size: 14.5px; }
.valores span { font-size: 12.5px; color: rgba(255, 255, 255, .66); }
.comunidade { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; border: 1px solid rgba(143, 181, 30, .35); background: rgba(143, 181, 30, .06); }
.comunidade svg { flex: none; width: 30px; height: 30px; fill: none; stroke: var(--verde); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.comunidade p { margin: 0; font-size: 14px; }
@media (max-width: 899px) {
  .sobre-grade { grid-template-columns: 1fr; }
  .sobre-fotos { min-height: 0; height: auto; aspect-ratio: 4 / 3; }
  .valores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sobre-texto h2, .sobre-lead { text-align: center; }
  .abas { display: flex; width: fit-content; margin-inline: auto; }
  .aba-painel p { text-align: center; }
  .objetivos { justify-content: center; }
}
/* v2: celular deitado - foto ao lado do texto, ocupando a coluna inteira: a troca de foto das abas fica a vista */
@media (max-height: 500px) and (orientation: landscape) {
  .sobre-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .sobre-fotos { aspect-ratio: auto; height: 100%; min-height: 0; }
  .sobre-texto h2, .sobre-lead, .aba-painel p { text-align: left; }
  .abas { margin-inline: 0; }
  .objetivos { justify-content: start; }
}

/* ---------- Instagram: instagram.css (v2) ---------- */

/* ---------- Contato ---------- */
.contato-grade { grid-template-columns: 1.05fr .95fr; align-items: stretch; }
.contato-grade > .canais { display: flex; flex-direction: column; gap: 12px; }
.contato-grade > .canais > .mapa-toque { flex: 1; min-height: 200px; height: auto; aspect-ratio: auto; }
.canais-cartao { background: #fff; border-radius: 18px; padding: 16px 18px; box-shadow: 0 6px 24px rgba(11, 13, 10, .06); }
.canais-cartao h3 { font-size: 17px; margin-bottom: 6px; }
.canal-loja { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--linha-clara); }
.cl-nome { display: grid; min-width: 0; }
.cl-nome b { font-size: 14.5px; }
.cl-nome small { font-size: 12.5px; color: var(--texto-suave); }
.cl-num { font-weight: 600; font-size: 14.5px; }
.cl-wa { grid-column: -2 / -1; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #25D366; color: #06331a; }
.cl-wa svg { width: 20px; height: 20px; }
.canais-cartao .copiar { min-height: 36px; }
.canais-emails { margin: 10px 0 0; font-size: 12.5px; color: var(--texto-suave); display: flex; flex-wrap: wrap; gap: 4px 12px; }
.canais-emails span { overflow-wrap: break-word; }
.canais-emails b { font-weight: 600; color: var(--texto); }
.mapa-toque { background: var(--escuro); }
.mapa-convite { display: grid; justify-items: center; gap: 8px; padding: 18px; font-size: 14px; text-align: center; color: rgba(255, 255, 255, .86); }
.mapa-convite svg { width: 34px; height: 34px; color: var(--verde); }
.mapa-convite b { color: #fff; }
.mapa-convite { white-space: nowrap; }
.mx-form { display: grid; gap: 12px; align-content: start; }
.mx-form label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
.mx-form input:not([type="checkbox"]), .mx-form select, .mx-form textarea { font: inherit; font-size: 16px; padding: 12px 14px; border-radius: 12px; border: 1px solid #cfd5c7; background: #fff; width: 100%; min-width: 0; color: var(--texto); }
.mx-form input:focus, .mx-form select:focus, .mx-form textarea:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px rgba(143, 181, 30, .25); }
.mx-form .btn { margin-top: 4px; }
.faq-lista { max-width: 820px; margin: 30px auto 0; }
details.faq { border-bottom-color: #dfe3d8; }
details.faq p { margin: 10px 0 0; }
details.faq:not([open]) > :not(summary) { display: none; }
@media (max-width: 899px) { .contato-grade { grid-template-columns: 1fr; } .contato-grade > .canais > .mapa-toque { min-height: 220px; } }
@media (max-width: 480px) {
  .canal-loja { grid-template-columns: 1fr auto auto; grid-template-areas: "n n n" "num cp wa"; row-gap: 6px; }
  .cl-nome { grid-area: n; } .cl-num { grid-area: num; } .canal-loja .copiar { grid-area: cp; } .cl-wa { grid-area: wa; }
}


/* ---------- Rodape ---------- */
.rodape { padding-top: 48px; }
.rodape-grade { display: grid; gap: 28px; grid-template-columns: 1fr 2.2fr; }
.rodape-marca img { width: 160px; height: auto; margin-bottom: 12px; }
.rodape-marca p { margin: 0; color: rgba(255, 255, 255, .7); }
.rodape-lojas { display: grid; gap: 18px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rodape-lojas div { display: grid; gap: 3px; align-content: start; min-width: 0; }
.rodape-lojas b { color: #fff; font-size: 14px; }
.rodape-lojas span { font-size: 13px; color: rgba(255, 255, 255, .68); overflow-wrap: break-word; }
.rodape-fim { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; margin-top: 28px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 13px; }
.rodape-fim p { margin: 0; }
@media (max-width: 1023px) { .rodape-grade { grid-template-columns: 1fr; } .rodape-lojas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


/* ---------- Barra do celular ---------- */
/* o kit vem com o azul-marinho da VOWT nesses fundos fixos: aqui e o grafite da Maxcell */
.barra-cel { background: rgba(11, 13, 10, .95) !important; border-top: 1px solid rgba(143, 181, 30, .18); }
.camada { background: rgba(11, 13, 10, .9); }
.barra-cel button, .barra-cel a { position: relative; }
/* v3: menu do celular so com as palavras, sem os numeros 01-10 (pedido do Hendry de 24/10, confirmado na v3) */
.menu-cel li a::before { content: none; }
.menu-cel li a { justify-content: center; }
@media (orientation: landscape) and (max-height: 500px) {
  .menu-cel ol { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .menu-cel li a { min-height: 46px; padding: 6px 10px; font-size: 14px; }
  .menu-cel .menu-acoes { padding-top: 10px; }
}
/* barra inferior so no celular (em pe ate 699 px, ou deitado com ate 500 px de altura); tablet em pe usa o WhatsApp flutuante */
@media (min-width: 700px) and (max-width: 899px) and (min-height: 501px) {
  .barra-cel { display: none !important; }
  body { padding-bottom: 0; }
  .wa-flutuante { display: flex; }
}
@media (min-width: 900px) and (max-width: 1000px) and (max-height: 500px) and (orientation: landscape) {
  .barra-cel { position: fixed; inset: auto 0 0 0; z-index: 60; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; height: calc(var(--barra-cel-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); transition: transform .25s; }
  .barra-cel a, .barra-cel button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #fff; text-decoration: none; font-size: 11px; font-weight: 600; background: none; border: 0; min-width: 0; }
  .barra-cel svg { width: 22px; height: 22px; }
  .barra-cel .wa { color: var(--wa); }
  body { padding-bottom: calc(var(--barra-cel-h) + env(safe-area-inset-bottom)); }
  body.camada-aberta .barra-cel { transform: translateY(110%); }
  .wa-flutuante { display: none !important; }
}
/* WhatsApp flutuante tambem some quando ficaria por cima de texto ou foto (site.js) */
.wa-flutuante.sobre-texto { opacity: 0; transform: scale(.6); pointer-events: none; }
/* player: o botao da loja fica embaixo do video (nunca em cima dos controles) + aviso de montagem */
.player.aberta { flex-direction: column; gap: 10px; }
.player-caixa { height: min(calc(100svh - 150px), 780px); }
.player .cta { position: static; transform: none; }
.player-nota { margin: 0; font-size: 12.5px; color: rgba(255, 255, 255, .72); text-align: center; }
@media (max-width: 700px) { .player-caixa { height: min(calc(100svh - 240px), 700px); } }
@media (max-height: 500px) and (orientation: landscape) {
  .player-caixa { height: calc(100svh - 24px); }
  .player .cta { position: absolute; left: auto; right: 16px; bottom: 44px; }
  .player-nota { position: absolute; right: 16px; bottom: 16px; max-width: 220px; text-align: right; }
}
.abertura { background: var(--escuro); }
.abertura img { width: min(240px, 56vw); }
.cartao-banner { background: var(--escuro-2); grid-template-columns: 1fr; }
.cartao-banner .arte img { height: auto; }
@media (min-width: 761px) {
  .cartao-banner .texto { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "t b" "p b"; column-gap: 28px; align-items: center; padding-block: 20px 22px; }
  .cartao-banner .texto h3 { grid-area: t; margin: 0 0 4px; }
  .cartao-banner .texto p { grid-area: p; margin: 0; }
  .cartao-banner .texto .btn { grid-area: b; }
}
.cartao-banner .texto p { color: rgba(255, 255, 255, .82); }
/* faixa de videos que arrasta (v2): o JS move o trilho; na vertical o dedo continua rolando a pagina */
.faixa-videos.arrasta { touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; }
.faixa-videos.arrasta .trilho { animation: none; will-change: transform; }
.faixa-videos.arrasta .cartao-video { cursor: inherit; }
.faixa-videos.arrastando { cursor: grabbing; }
/* v3: lojas com tudo o que a arte da Maxcell traz (endereco completo, numero, Instagram); WhatsApp unico (45) 99114-2818 */
.loja-dados { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 7px; }
.loja-dados li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: start; font-size: 14px; line-height: 1.4; color: rgba(255, 255, 255, .82); }
.loja-dados svg { width: 18px; height: 18px; margin-top: 1px; color: var(--verde); }
.loja-dados .loja-ig { display: block; }
.loja-dados .loja-ig a { display: inline-flex; align-items: center; gap: 8px; min-height: 30px; margin-block: -5px; color: #fff; text-decoration: none; }
.loja-dados .loja-ig a span { text-decoration: underline; text-decoration-color: rgba(143, 181, 30, .6); text-underline-offset: 3px; overflow-wrap: anywhere; }
.loja-dados .loja-ig a:hover span { color: var(--verde); }
.loja-dados .loja-tel { color: #fff; font-weight: 600; }
.canais-cartao .cl-titulo { margin: 14px 0 0; }
.canal-central .cl-num { font-size: 15.5px; }
.cl-ig { grid-column: -2 / -1; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--linha-clara); color: var(--texto); }
.cl-ig:hover { border-color: var(--verde); color: var(--verde-texto); }
.cl-ig svg { width: 20px; height: 20px; }
@media (max-width: 480px) { .cl-ig { grid-area: wa; } }
.rodape-wa { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin-top: 12px; color: #fff; text-decoration: none; font-size: 14px; }
.rodape-wa svg { width: 20px; height: 20px; flex: none; color: #25D366; }
.rodape-wa:hover b { color: var(--verde); }
.rodape-lojas .rodape-ig { justify-self: start; display: inline-block; padding-block: 6px; margin-block: -6px; font-size: 13px; color: #fff; text-decoration: underline; text-decoration-color: rgba(143, 181, 30, .6); text-underline-offset: 3px; overflow-wrap: anywhere; }
@media (orientation: landscape) and (max-height: 500px) { .menu-cel .menu-acoes { grid-template-columns: 1fr; } }
/* v3: o cartao de canais cresceu; no computador a caixa Mensagem estica e o formulario termina junto, sem vao embaixo do botao */
@media (min-width: 900px) {
  .contato-grade > .mx-form { display: flex; flex-direction: column; }
  .mx-form > label:has(textarea) { flex: 1; grid-template-rows: auto 1fr; }
  .mx-form textarea { height: 100%; min-height: 84px; resize: none; }
}
/* v3: rodape mais aberto ("menos espremido"): marca, frase e WhatsApp numa linha em cima; as 4 lojas em colunas largas embaixo */
.rodape-grade { grid-template-columns: 1fr; gap: 0; }
.rodape-marca { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; padding-bottom: 24px; margin-bottom: 30px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.rodape-marca img { width: 150px; margin-bottom: 0; }
.rodape-marca .rodape-wa { margin-top: 0; }
@media (min-width: 768px) { .rodape-marca .rodape-wa { margin-left: auto; } }
.rodape-lojas { gap: 28px 40px; }
.rodape-lojas div { gap: 6px; }
.rodape-lojas b { font-size: 15px; }
.rodape-lojas span { font-size: 13.5px; }
.rodape-lojas .rl-end { line-height: 1.55; }
@media (max-width: 1023px) { .rodape-lojas { gap: 26px 24px; } }
/* v3: sem os e-mails no cartao de canais, a ultima loja fecha o cartao sem linha embaixo */
.canais-cartao .canal-loja:last-child { border-bottom: 0; padding-bottom: 2px; }
/* v3: fachadas reais das 4 lojas, ja recortadas em 5:4 -> o quadro e 5:4 em todas as telas (antes 16:10 no tablet e 4:3 no celular) */
.loja-foto, .lojas .loja-foto { aspect-ratio: 5 / 4; }
/* v3: o atalho do topo leva ao cartao da categoria e acende ele (o catalogo saiu) */
.cat.realce { animation: cat-realce 1.4s ease 2; }
@keyframes cat-realce { 0%, 100% { box-shadow: 0 0 0 0 rgba(143, 181, 30, 0); } 45% { box-shadow: 0 0 0 4px var(--verde), 0 0 30px rgba(143, 181, 30, .55); } }
@media (prefers-reduced-motion: reduce) { .cat.realce { animation: none; box-shadow: 0 0 0 4px var(--verde); } }
.menu-cel .menu-priv { justify-self: center; min-height: 32px; padding: 6px 10px; border: 0; background: none; font: inherit; font-size: 13px; cursor: pointer; color: rgba(255, 255, 255, .7); text-decoration: underline; text-underline-offset: 3px; }
/* v3 sem catalogo: o menu do topo fica no centro da tela (sem o botao da lista, o lado direito ficou mais estreito que o logo) */
@media (min-width: 1200px) { .topo-barra .container { position: relative; } .topo-barra nav { position: absolute; left: 50%; transform: translateX(-50%); } }
/* v3 sem catalogo: Categorias (escura) + banner + Impressao 3D (clara): o vao de menos de 1 px da .ponte deixava um fio branco */
#impressao-3d { box-shadow: 0 -2px 0 var(--claro-2); }
/* Maxcell v2: Instagram (item 6). Prefixo ig2- (a v1 usava ig-; o render antigo nao acha mais o gancho).
   Abas com anel de story, perfil da conta escolhida, mural em leque 3D (CSS) e visualizador em tela cheia. */
.ig2-palco { display: grid; gap: 26px; align-items: center; }
@media (min-width: 720px) { .ig2-palco { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 56px); } }
.ig2-lado { min-width: 0; }

/* anel de story: degrade do Instagram girando atras do simbolo da Maxcell */
.ig2-anel { position: relative; display: block; width: 100%; height: 100%; border-radius: 50%; padding: 3px; isolation: isolate; }
.ig2-anel::before { content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: -1;
  background: conic-gradient(from 0deg, #FEDA75, #FA7E1E, #D62976, #962FBF, #4F5BD5, #FEDA75); }
.ig2-anel.gira::before { animation: ig2-gira 4s linear infinite; }
.ig2-logo { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; border: 3px solid #fff; background: var(--escuro); }
.ig2-logo svg { width: 56%; height: 56%; fill: none; stroke-width: 30; stroke-linecap: round; stroke-linejoin: round; }
@keyframes ig2-gira { to { transform: rotate(360deg); } }

/* abas: as contas sempre a vista (v3: 4, com a Gamers) */
.ig2-contas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 20px; }
.ig2-contas button { display: grid; justify-items: center; gap: 7px; padding: 11px 4px 10px; border-radius: 16px; border: 1px solid var(--linha-clara);
  background: #fff; color: var(--texto); font: 600 13.5px/1.2 var(--fonte-texto); cursor: pointer; transition: transform .2s, border-color .25s, background-color .25s; }
.ig2-contas button:hover { transform: translateY(-2px); }
.ig2-contas button[aria-selected="true"] { border-color: var(--verde); background: #F4F8EA; box-shadow: 0 0 0 1px var(--verde); }
.ig2-contas .ig2-anel { width: 48px; height: 48px; padding: 2px; }
.ig2-contas button[aria-selected="false"] .ig2-anel::before { background: var(--linha-clara); }
.ig2-contas .ig2-logo { border-width: 2px; }

/* perfil da conta escolhida */
.ig2-perfil, .ig2-mural { transition: opacity .2s ease, transform .2s ease; }
.ig2-perfil.saindo, .ig2-mural.saindo { opacity: 0; transform: translateY(10px); }
.ig2-topo { display: flex; align-items: center; gap: 14px; }
.ig2-avatar { flex: none; width: 78px; height: 78px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; transition: transform .25s; }
.ig2-avatar:hover { transform: scale(1.05); }
.ig2-id { display: grid; gap: 2px; min-width: 0; }
.ig2-id b { font: 700 17px/1.25 var(--fonte-titulo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ig2-id span { font-size: 13.5px; color: var(--texto-suave); }
.ig2-seguir { margin-left: auto; flex: none; background: var(--escuro); color: #fff; }
.ig2-seguir:hover { background: #262B22; box-shadow: none; }
.ig2-bio { margin: 14px 0 0; font-size: 15px; color: var(--texto-suave); }
.ig2-destaques { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ig2-destaques a { display: flex; flex-direction: column; align-items: center; gap: 7px; text-decoration: none; color: var(--texto-suave); }
.ig2-dest { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--escuro);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--linha-clara); transition: transform .25s, box-shadow .25s; }
.ig2-dest svg { width: 24px; height: 24px; fill: none; stroke: var(--verde); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ig2-destaques a:hover .ig2-dest { transform: translateY(-3px); box-shadow: 0 0 0 2px #fff, 0 0 0 4px #D62976; }
.ig2-destaques small { font-size: 12px; line-height: 1.2; text-align: center; max-width: 80px; }
/* nome de usuario na aba (so no computador, onde cabe) */
.ig2-contas small { display: none; font-size: 12px; font-weight: 500; color: var(--texto-suave); margin-top: -4px; }
@media (min-width: 1100px) {
  .ig2-contas .ig2-anel { width: 54px; height: 54px; }
  .ig2-contas small { display: block; }
  .ig2-avatar { width: 88px; height: 88px; }
  .ig2-dest { width: 64px; height: 64px; }
  .ig2-bio { font-size: 16px; }
}
/* tablet e celular deitado (2 colunas estreitas): Seguir so com o icone */
@media (max-width: 1099px) {
  .ig2-avatar { width: 66px; height: 66px; }
  .ig2-seguir { width: 42px; height: 42px; min-height: 42px; padding: 0; border-radius: 50%; }
  .ig2-seguir span { display: none; }
  .ig2-id b { font-size: 16px; }
}
/* celular em pe: sem o avatar grande (o anel gira na aba da loja escolhida) e tudo mais junto */
@media (max-width: 719px) {
  .ig2-palco { gap: 14px; }
  .ig2-contas { margin-bottom: 14px; }
  .ig2-contas button { padding: 9px 4px 8px; gap: 6px; }
  .ig2-contas .ig2-anel { width: 42px; height: 42px; }
  .ig2-contas button[aria-selected="true"] .ig2-anel::before { animation: ig2-gira 4s linear infinite; }
  .ig2-avatar { display: none; }
  .ig2-bio { margin-top: 8px; font-size: 14.5px; }
  .ig2-destaques { margin-top: 12px; }
  .ig2-dest { width: 52px; height: 52px; }
  .ig2-dest svg { width: 22px; height: 22px; }
  .ig2-mural .ig2-legenda { display: none; } /* no celular o texto do post aparece no visualizador */
}
@media (max-width: 360px) { .ig2-dest { width: 46px; height: 46px; } .ig2-dest svg { width: 20px; height: 20px; } }

/* mural em leque: o post da frente e dois atras, girando sozinho; toque abre em tela cheia */
.ig2-mural { --alto: 252px; min-width: 0; padding-block: 8px 4px; }
@media (max-width: 360px) { .ig2-mural { --alto: 232px; } }
@media (min-width: 720px) { .ig2-mural { --alto: 320px; } }
@media (min-width: 1100px) { .ig2-mural { --alto: 370px; } }
.ig2-deck { position: relative; height: var(--alto); perspective: 1100px; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.ig2-post { position: absolute; top: 0; left: 50%; width: calc(var(--alto) * .5625); height: var(--alto); margin-left: calc(var(--alto) * -.28125);
  padding: 0; border: 0; border-radius: 18px; overflow: hidden; background: #111; cursor: pointer;
  box-shadow: 0 18px 40px rgba(11, 13, 10, .26); transition: transform .75s cubic-bezier(.22, .75, .2, 1), opacity .75s ease;
  animation: ig2-entra .55s ease backwards; }
.ig2-post img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.ig2-post img.fundo { object-fit: cover; filter: blur(16px) brightness(.75); transform: scale(1.15); }
.ig2-post::after { content: ""; position: absolute; inset: 0; background: rgba(11, 13, 10, .4); opacity: 0; transition: opacity .75s ease; pointer-events: none; }
.ig2-post[data-pos="0"] { z-index: 3; transform: none; }
.ig2-post[data-pos="1"] { z-index: 2; transform: translateX(60%) translateZ(-150px) rotateY(-24deg); }
.ig2-post[data-pos="-1"] { z-index: 2; transform: translateX(-60%) translateZ(-150px) rotateY(24deg); }
.ig2-post[data-pos="x"] { z-index: 1; transform: translateZ(-320px) scale(.8); opacity: 0; pointer-events: none; }
.ig2-post[data-pos="1"]::after, .ig2-post[data-pos="-1"]::after { opacity: 1; }
.ig2-post:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; }
@keyframes ig2-entra { from { opacity: 0; } }
.ig2-legenda { margin: 16px auto 0; max-width: 420px; min-height: 2.9em; text-align: center; font-size: 14px; line-height: 1.45; color: var(--texto-suave);
  transition: opacity .22s ease; } /* so a primeira frase (curta() no instagram.js): o texto inteiro fica no visualizador */
.ig2-legenda.troca { opacity: 0; }

/* visualizador de novidades (camada do kit: voltar do celular e Esc fecham) */
.ig2-story { padding: 16px; }
.ig2-story-caixa { position: relative; width: min(100%, calc((100vh - 32px) * .5625), 470px); width: min(100%, calc((100svh - 32px) * .5625), 470px);
  aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; background: #000; color: #fff; -webkit-user-select: none; user-select: none; }
.ig2-story-caixa::before, .ig2-story-caixa::after { content: ""; position: absolute; left: 0; right: 0; z-index: 3; pointer-events: none; }
.ig2-story-caixa::before { top: 0; height: 110px; background: linear-gradient(rgba(0, 0, 0, .55), transparent); }
.ig2-story-caixa::after { bottom: 0; height: 46%; background: linear-gradient(transparent, rgba(0, 0, 0, .82)); }
.ig2-barras { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 4; display: flex; gap: 4px; }
.ig2-barras span { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .35); overflow: hidden; }
.ig2-barras i { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: left center; }
.ig2-barras .feita i { transform: scaleX(1); }
.ig2-barras .ativa i { animation: ig2-barra var(--dur, 5s) linear forwards; }
.ig2-story.pausado .ig2-barras .ativa i { animation-play-state: paused; }
@keyframes ig2-barra { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ig2-story-topo { position: absolute; top: 22px; left: 12px; right: 12px; z-index: 4; display: flex; align-items: center; gap: 10px; pointer-events: none; }
.ig2-story-av { flex: none; width: 38px; height: 38px; }
.ig2-story-av .ig2-logo { border-width: 2px; border-color: #000; }
.ig2-story-topo b { display: block; font-size: 14px; }
.ig2-story-topo small { display: block; font-size: 12px; opacity: .8; }
.ig2-story-foto { position: absolute; inset: 0; }
.ig2-story-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.ig2-story-foto img.fundo { object-fit: cover; filter: blur(22px) brightness(.55); transform: scale(1.15); }
.ig2-st-img.entra { animation: ig2-aparece .35s ease; }
@keyframes ig2-aparece { from { opacity: 0; transform: scale(1.03); } }
.ig2-st-ant, .ig2-st-prox { position: absolute; top: 64px; bottom: 132px; z-index: 3; padding: 0; border: 0; background: transparent; cursor: pointer; }
.ig2-st-ant { left: 0; width: 34%; }
.ig2-st-prox { right: 0; width: 66%; }
.ig2-st-ant:focus-visible, .ig2-st-prox:focus-visible { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: -4px; }
.ig2-story-rodape { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: grid; gap: 12px; padding: 16px 16px 18px; }
.ig2-story-rodape p { margin: 0; font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, .94); }
.ig2-story-rodape .btn { justify-self: start; background: #fff; color: var(--escuro); }
.ig2-story-rodape .btn:hover { background: #fff; box-shadow: 0 8px 22px rgba(0, 0, 0, .35); }

@media (prefers-reduced-motion: reduce) {
  .ig2-anel.gira::before, .ig2-post, .ig2-st-img.entra { animation: none; }
  .ig2-post, .ig2-perfil, .ig2-mural, .ig2-legenda { transition: none; }
  .ig2-barras .ativa i { animation: none; transform: scaleX(1); }
}