/* =========================================================================
   FunPay — design system do site
   Organização no espírito do visorfinance.app: página clara, coluna estreita
   e centralizada, cards de canto bem arredondado com sombra em camadas,
   faixas escuras de ponta a ponta separando os blocos.
   ========================================================================= */

:root{
  /* cores ------------------------------------------------------------- */
  /* tiradas do logo do FunPay, não de referência de site nenhum */
  --azul:        #017dc5;   /* ação principal                            */
  --azul-fundo:  #01679f;   /* o mesmo azul no hover                     */
  --azul-vivo:   #2aa3e8;   /* destaque dentro de ilustração             */
  --navy:        #062c4a;   /* faixa escura, também do logo              */
  --lavanda:     #e6f2fa;   /* fundo das cenas e dos quadros de print    */
  --lavanda-2:   #f1f8fd;
  --azul-linha:  #9fd2ee;
  --verde:       #3f9c31;   /* o verde da marca, onde o número é positivo */
  --verde-fundo: #eaf6e7;

  --tinta:   #0d0d0d;       /* título                                    */
  --texto:   #364153;       /* corpo                                     */
  --fraco:   #6a7282;       /* apoio, legenda                            */
  --escuro:  #062c4a;       /* faixa escura — o navy do logo             */
  --cinza:   #f6f8fa;       /* faixa clara alternada                     */
  --linha:   #dfe6ec;       /* a borda que substituiu a sombra pesada    */

  /* medidas ----------------------------------------------------------- */
  --wrap:     990px;        /* coluna de conteúdo                        */
  --wrap-nav: 1216px;       /* a barra do topo é mais larga que o texto  */
  --r:        14px;         /* card — mais reto que o do Visor           */
  --r-sm:     10px;
  --r-pill:   999px;
  --gap:      24px;
  --sec:      96px;         /* respiro entre seções                      */

  /* O painel do FunPay usa card com BORDA e sem sombra (PADRAO-VISUAL.md).
     O site segue a mesma regra: borda fina resolve, e a sombra só aparece
     no que está de fato flutuando — barra do topo, balão, aparelho. */
  --borda:   1px solid var(--linha);
  --sombra:  0 1px 2px rgba(6,44,74,.05);
  --sombra-alta:
    0 2px 4px rgba(6,44,74,.05),
    0 12px 28px -8px rgba(6,44,74,.16);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:104px; }

body{
  margin:0;
  background:#fff;
  color:var(--texto);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }

/* tipografia --------------------------------------------------------- */
h1,h2,h3,h4,h5{
  margin:0;
  font-family:'Bricolage Grotesque','Inter',sans-serif;
  color:var(--tinta);
  font-weight:700;
  letter-spacing:-.015em;
  line-height:1.2;
}
/* título menor e mais apertado que o do Visor, com peso 800 no h1 */
h1{ font-size:clamp(32px,4.4vw,46px); font-weight:800; letter-spacing:-.025em; line-height:1.12; }
h2{ font-size:clamp(25px,3vw,30px); }
h3{ font-size:20px; letter-spacing:-.01em; }
p{ margin:0; }

.wrap{ width:min(100% - 48px, var(--wrap)); margin-inline:auto; }

/* etiqueta acima do título da seção */
/* pílula em vez de maiúscula espaçada — o Visor usa a segunda */
.eyebrow{
  display:inline-block;
  margin-bottom:14px; padding:5px 12px;
  border-radius:var(--r-pill);
  background:var(--verde-fundo); color:var(--verde);
  font-size:12.5px; font-weight:700; letter-spacing:.01em;
}
.sec--dark .eyebrow{ background:rgba(255,255,255,.1); color:#aecde2; }
.bt--azul .eyebrow,.mod .eyebrow{ background:rgba(255,255,255,.18); color:#fff; }

/* =========================================================================
   BARRA DO TOPO
   Três pílulas brancas flutuando: marca, menu e ações. Nada de faixa cheia.
   ========================================================================= */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  padding:12px 0;
  transition:box-shadow .25s ease;
}
.nav.is-scrolled{ box-shadow:0 1px 12px rgba(6,44,74,.07); }
.nav__in{
  width:min(100% - 48px, var(--wrap-nav));
  margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
/* Uma barra só, encostada no topo — o Visor usa três pílulas flutuando */
.nav{ background:rgba(255,255,255,.92); border-bottom:var(--borda); backdrop-filter:blur(10px); }
.nav__marca{ display:flex; align-items:center; }
.nav__acoes .btn--branco{ background:#fff; border:var(--borda); }
.nav__marca img{ height:26px; width:auto; }
.nav__menu{ display:flex; align-items:center; gap:4px; }
.nav__menu a{
  padding:7px 13px;
  border-radius:8px;
  color:var(--texto);
  font-size:15px; font-weight:500;
  transition:background .18s ease, color .18s ease;
}
.nav__menu a:hover{ background:var(--cinza); color:var(--tinta); }
.nav__menu a.is-ativo{ color:var(--azul); }
.nav__acoes{ display:flex; align-items:center; gap:10px; }
.nav__sanduiche{ display:none; }

/* =========================================================================
   BOTÕES
   ========================================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:46px; padding:0 22px;
  /* canto de 10px: o botão-pílula de 48px é a assinatura do Visor */
  border:0; border-radius:10px;
  font-size:16px; font-weight:700; letter-spacing:-.01em;
  cursor:pointer;
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn--azul{ background:var(--azul); color:#fff; }
.btn--azul:hover{ background:var(--azul-fundo); }
.btn--branco{ background:#fff; color:var(--tinta); border:var(--borda); }
.btn--branco:hover{ background:var(--cinza); }
.btn--vazio{ background:transparent; color:var(--tinta); box-shadow:inset 0 0 0 1px var(--linha); }
.btn--vazio:hover{ background:var(--cinza); }
.btn--claro{ background:#fff; color:var(--escuro); }
.btn--sm{ height:38px; padding:0 16px; font-size:14.5px; }
.btn svg{ width:18px; height:18px; }

/* =========================================================================
   SEÇÕES
   ========================================================================= */
.sec{ padding:var(--sec) 0; }
.sec--tint{ background:var(--cinza); }
.sec--dark{ background:var(--escuro); color:#c3ced8; }
.sec--dark h2,.sec--dark h3{ color:#fff; }

.sec__topo{ max-width:720px; margin:0 auto 48px; text-align:center; }
.sec__topo p{ margin-top:14px; color:var(--fraco); font-size:17px; }
.sec--dark .sec__topo p{ color:#8fa3b5; }

/* =========================================================================
   HERO
   Texto centralizado, e abaixo a cena: um quadro com o print do sistema
   ladeado por fichas presas com alfinete.
   ========================================================================= */
.hero{ padding:128px 0 0; text-align:center; overflow:hidden; }
.hero__prova{
  display:inline-flex; align-items:center; gap:10px;
  margin-bottom:22px; padding:7px 16px 7px 10px;
  background:#fff; border:var(--borda); border-radius:var(--r-pill);
  color:var(--fraco); font-size:14px; font-weight:500;
}
.hero__prova img{ height:15px; width:auto; opacity:.85; }
.hero__prova span{ display:inline-flex; align-items:center; gap:8px; }
.hero h1{ max-width:880px; margin-inline:auto; }
/* Grifo de marca-texto atrás da palavra, em vez do traço fino embaixo
   (o traço é o recurso do Visor). */
.hero h1 .risco{
  position:relative; z-index:0;
  padding:0 .12em;
}
.hero h1 .risco::before{
  content:''; position:absolute; z-index:-1;
  left:0; right:0; bottom:.04em; height:.42em;
  background:var(--verde-fundo);
  border-radius:3px;
  transform:skewX(-8deg);
}
.hero__sub{
  max-width:620px; margin:20px auto 0;
  color:var(--fraco); font-size:17px;
}
.hero__acoes{ display:flex; justify-content:center; gap:12px; margin-top:32px; flex-wrap:wrap; }
.hero__nota{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:18px; color:var(--fraco); font-size:14px;
}
.hero__nota svg{ width:16px; height:16px; color:var(--azul-vivo); }

/* a cena ------------------------------------------------------------- */
.cena{ position:relative; margin-top:56px; padding-bottom:86px; }
.cena__quadro{
  position:relative; z-index:2;
  width:min(100%,620px); margin-inline:auto;
  padding:18px;
  background:linear-gradient(180deg,var(--lavanda-2),var(--lavanda));
  border-radius:var(--r);
}
.cena__quadro img{ border-radius:var(--r-sm); box-shadow:var(--sombra-alta); }
/* o balão branco sobre o print */
/* o balão encosta na base do quadro para não tapar o print */
.cena__balao{
  position:absolute; z-index:3; left:50%; bottom:46px; transform:translateX(-50%);
  display:flex; align-items:center; gap:14px;
  width:min(86%,420px); padding:16px 20px;
  background:#fff; border-radius:16px; box-shadow:var(--sombra-alta);
  text-align:left;
}
.cena__balao .marca{
  flex:none; display:grid; place-items:center;
  width:36px; height:36px; border-radius:11px;
  background:var(--azul); color:#fff;
}
.cena__balao .marca svg{ width:18px; height:18px; }
.cena__balao p{ font-size:15px; color:var(--texto); }
.cena__balao b{ color:var(--tinta); }

/* --- os avisos do sistema ao redor do print ------------------------- */
.cena__avisos{ position:absolute; inset:0; z-index:3; pointer-events:none; }
.aviso{
  position:absolute;
  display:flex; align-items:center; gap:11px;
  width:224px; padding:11px 14px;
  background:#fff; border:var(--borda); border-radius:12px;
  box-shadow:var(--sombra-alta);
  text-align:left;
  opacity:0;
  animation:aviso-entrar .7s cubic-bezier(.2,.8,.3,1) forwards;
}
.aviso__arte{
  flex:none; display:grid; place-items:center;
  width:34px; height:34px; border-radius:9px; background:var(--lavanda);
}
.aviso__arte .art{ width:24px; height:24px; }
.aviso__txt{ display:grid; }
.aviso__txt b{ color:var(--tinta); font-size:13px; font-weight:700; }
.aviso__txt em{ color:var(--fraco); font-size:11.5px; font-style:normal; }
/* entram de fora da cena, como notificação chegando */
@keyframes aviso-entrar{
  from{ opacity:0; transform:translateX(var(--de,-26px)); }
  to  { opacity:1; transform:none; }
}
.aviso--1{ left:-34px;  top:44px;  --de:-30px; }
.aviso--2{ left:-58px;  top:250px; --de:-30px; }
.aviso--3{ right:-34px; top:112px; --de:30px;  }
.aviso--4{ right:-58px; top:318px; --de:30px;  }

/* =========================================================================
   BENTO — cards de recurso com print dentro
   ========================================================================= */
.bento{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap); }
.bento--3{ grid-template-columns:repeat(3,1fr); }
.card{
  background:#fff; border:var(--borda); border-radius:var(--r);
  overflow:hidden;
  transition:border-color .22s ease;
}
.card:hover{ border-color:var(--azul-linha); }
.card__txt{ padding:24px 24px 0; }
.card__txt h3{ margin-bottom:8px; }
.card__txt p{ color:var(--fraco); font-size:15px; }
.card__tela{
  margin:20px 20px 0; padding:14px 14px 0;
  background:linear-gradient(180deg,var(--lavanda-2),var(--lavanda));
  border-radius:var(--r-sm) var(--r-sm) 0 0;
}
.card__tela img{ border-radius:8px 8px 0 0; box-shadow:var(--sombra); }
.card--largo{ grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:0; }
.card--largo .card__txt{ padding:36px; }
.card--largo .card__tela{ margin:24px 24px 24px 0; padding:14px; border-radius:var(--r-sm); }
.card--largo .card__tela img{ border-radius:8px; }

/* lista "Conheça:" dentro do card */
.conheca{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:16px; }
.conheca span{ color:var(--fraco); font-size:13px; }
.conheca a{
  padding:5px 12px; border-radius:var(--r-pill);
  background:var(--cinza); color:var(--texto);
  font-size:13px; font-weight:500;
  transition:background .18s ease, color .18s ease;
}
.conheca a:hover{ background:var(--lavanda); color:var(--azul); }

/* =========================================================================
   FAIXA ESCURA — três colunas (painel, maquininha, sincronização)
   ========================================================================= */
.trio{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
.trio__item{
  padding:28px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r);
}
.trio__item .eyebrow{ color:#7f97ab; font-size:12px; }
.trio__item h3{ margin-bottom:10px; font-size:19px; }
.trio__item p{ color:#8fa3b5; font-size:15px; }
.trio__tela{ margin-top:22px; border-radius:var(--r-sm); overflow:hidden; box-shadow:var(--sombra-alta); }

/* =========================================================================
   MÓDULOS
   ========================================================================= */
.mods{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap); }
.mod{
  display:block; padding:32px;
  border-radius:var(--r); color:#fff;
  box-shadow:var(--sombra);
  transition:transform .22s ease, box-shadow .22s ease;
}
.mod:hover{ transform:translateY(-4px); box-shadow:var(--sombra-alta); }
.mod--eventos{ background:linear-gradient(150deg,#4c1d95,#7c3aed); }
.mod--restaurante{ background:linear-gradient(150deg,#7c2d12,#ea8a1f); }
.mod .eyebrow{ color:rgba(255,255,255,.72); font-size:12px; }
.mod h3{ color:#fff; font-size:26px; letter-spacing:-.02em; }
.mod p{ margin-top:10px; color:rgba(255,255,255,.82); font-size:15px; }
.mod__tela{ margin-top:24px; border-radius:var(--r-sm); overflow:hidden; box-shadow:var(--sombra-alta); }
.mod__link{ display:inline-flex; align-items:center; gap:7px; margin-top:22px; font-weight:700; }

/* =========================================================================
   SELOS DE HOMOLOGAÇÃO
   ========================================================================= */
.selos{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px 28px; max-width:600px; }
.selo{ display:flex; align-items:center; gap:12px; font-size:15px; }
.selo svg{ flex:none; width:18px; height:18px; color:var(--verde); }
.homolog{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.homolog__marcas{ display:flex; align-items:center; gap:28px; margin-bottom:26px; }
.homolog__marcas img{ height:30px; width:auto; }

/* esteira de recursos da maquininha */
.esteira{ overflow:hidden; margin-top:56px; mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.esteira ul{ display:flex; gap:0; margin:0; padding:0; list-style:none; width:max-content; animation:correr 32s linear infinite; }
.esteira li{ display:flex; align-items:center; gap:18px; padding-right:18px; color:#8fa3b5; font-size:15px; white-space:nowrap; }
.esteira li::after{ content:'◆'; color:rgba(255,255,255,.22); font-size:9px; }
@keyframes correr{ to{ transform:translateX(-50%); } }

/* =========================================================================
   FAQ
   ========================================================================= */
.faq{ display:grid; grid-template-columns:320px 1fr; gap:56px; align-items:start; }
.faq__lado h2{ margin-bottom:16px; }
.faq__lado p{ color:var(--fraco); font-size:15px; margin-bottom:24px; }
.faq__lista{ display:grid; gap:12px; }
.item{
  background:#fff; border-radius:16px; box-shadow:var(--sombra);
  overflow:hidden;
}
.item__cab{
  display:flex; align-items:center; gap:18px;
  width:100%; padding:22px 24px;
  background:none; border:0; text-align:left; cursor:pointer;
}
.item__num{ flex:none; color:var(--azul-linha); font-size:14px; font-weight:700; }
.item__cab h3{ flex:1; font-size:17px; }
.item__mais{ flex:none; width:24px; height:24px; color:var(--fraco); transition:transform .22s ease; }
.item[open] .item__mais{ transform:rotate(45deg); }
.item__corpo{ padding:0 24px 24px 66px; color:var(--fraco); font-size:15px; }

/* =========================================================================
   FECHO
   ========================================================================= */
.fecho{ text-align:center; }
.fecho h2{ max-width:760px; margin-inline:auto; font-size:clamp(28px,3.8vw,38px); }
.fecho p{ max-width:600px; margin:18px auto 0; color:#8fa3b5; }
.fecho__acoes{ display:flex; justify-content:center; gap:12px; margin-top:32px; flex-wrap:wrap; }

/* =========================================================================
   RODAPÉ
   ========================================================================= */
.foot{ padding:72px 0 40px; background:var(--escuro); color:#8fa3b5; }
.foot__topo{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:40px; }
.foot__marca img{ height:30px; width:auto; margin-bottom:16px; }
.foot__marca p{ font-size:14px; max-width:280px; }
.foot h5{ margin-bottom:14px; color:#fff; font-size:13px; letter-spacing:.07em; text-transform:uppercase; }
.foot nav{ display:grid; gap:9px; }
.foot nav a{ font-size:14px; transition:color .18s ease; }
.foot nav a:hover{ color:#fff; }
.foot__base{
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  margin-top:56px; padding-top:24px;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:13px; color:#6b7f90;
}

/* =========================================================================
   LIGHTBOX — clicar no print abre em tela cheia
   ========================================================================= */
.lb{
  position:fixed; inset:0; z-index:90;
  display:none; place-items:center;
  padding:40px;
  background:rgba(1,14,22,.88); backdrop-filter:blur(4px);
}
.lb.is-aberto{ display:grid; }
.lb img{ max-width:min(1400px,92vw); max-height:88vh; border-radius:var(--r-sm); box-shadow:var(--sombra-alta); }
.lb__fechar{
  position:absolute; top:24px; right:28px;
  width:44px; height:44px; border:0; border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff; font-size:22px; cursor:pointer;
}
.zoom{ display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in; }

/* =========================================================================
   REVELAÇÃO AO ROLAR
   ========================================================================= */
[data-rv]{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
[data-rv].is-visivel{ opacity:1; transform:none; }


/* =========================================================================
   ARTES
   Ilustrações próprias (montar.py, dicionário ARTES). Cada uma tem uma peça
   que se mexe — sempre devagar e em laço, para dar vida sem puxar o olho.
   ========================================================================= */
.art{ display:block; overflow:visible; }

/* o cupom saindo da maquininha */
.art-papel{ animation:art-imprimir 4.2s ease-in-out infinite; }
@keyframes art-imprimir{
  0%,18%   { transform:translateY(9px);  opacity:0; }
  32%,72%  { transform:translateY(0);    opacity:1; }
  88%,100% { transform:translateY(-3px); opacity:0; }
}

/* a caixa que assenta na pilha */
.art-cai{ animation:art-assentar 3.6s ease-in-out infinite; }
@keyframes art-assentar{
  0%,100%{ transform:translateY(0); }
  45%    { transform:translateY(-5px); }
}

/* a moeda girando de perfil */
.art-moeda{ transform-origin:48px 46px; animation:art-girar 3.4s ease-in-out infinite; }
@keyframes art-girar{
  0%,100%{ transform:scaleX(1); }
  50%    { transform:scaleX(.12); }
}

/* o selo de autorizado batendo no documento */
.art-selo{ transform-origin:46px 45px; animation:art-carimbar 3.8s ease-in-out infinite; }
@keyframes art-carimbar{
  0%,55%  { transform:scale(1); }
  62%     { transform:scale(1.16); }
  70%,100%{ transform:scale(1); }
}

/* as ondas do cartão de aproximação */
.art-onda{ animation:art-pulsar 2.2s ease-in-out infinite; }
.art-onda--2{ animation-delay:.28s; }
@keyframes art-pulsar{
  0%,100%{ opacity:.25; transform:translateX(-2px); }
  50%    { opacity:1;   transform:translateX(0); }
}

/* o vapor do prato */
.art-vapor path{ animation:art-subir 3s ease-in-out infinite; }
.art-vapor path:nth-child(2){ animation-delay:.4s; }
.art-vapor path:nth-child(3){ animation-delay:.8s; }
@keyframes art-subir{
  0%,100%{ opacity:.3; transform:translateY(2px); }
  50%    { opacity:.95; transform:translateY(-2px); }
}

/* a tampa do prato levantando um dedo */
.art-tampa{ animation:art-levantar 3s ease-in-out infinite; }
@keyframes art-levantar{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-2.5px); }
}

/* o picote do ingresso correndo */
.art-picote{ animation:art-picotar 2.6s linear infinite; }
@keyframes art-picotar{ to{ stroke-dashoffset:-14; } }


/* =========================================================================
   BENTO DE RECURSOS
   Cards de tamanhos diferentes, cada um com uma vitrine desenhada. A regra
   que faz a seção respirar: o conteúdo da vitrine é SEMPRE maior que o card
   e sai pela borda. Se couber todo dentro, fica parado.
   ========================================================================= */
.sec__topo--esq{ max-width:640px; margin:0 0 44px; text-align:left; }

.bento{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); }
/* as páginas de módulo ainda usam .card dentro do .bento: sem isto cada um
   cairia numa coluna de 230px e a grade quebrava */
.bento > .card{ grid-column:span 2; }
.bento > .card--largo{ grid-column:1 / -1; }
/* a grade de três é redefinida aqui porque o .bento acima vem depois da
   declaração original e sobrescrevia as colunas */
.bento--3{ grid-template-columns:repeat(3,1fr); }
.bento--3 > .card{ grid-column:span 1; }
.bt{
  display:flex; flex-direction:column;
  background:var(--lavanda); border:1px solid #d7e7f2; border-radius:var(--r);
  overflow:hidden;
  transition:border-color .22s ease;
}
.bt:hover{ border-color:var(--azul-vivo); }
.bt--azul{ border-color:transparent; }
.bt--1{ grid-column:span 1; }
.bt--2{ grid-column:span 2; }
.bt__palco{ position:relative; flex:1; min-height:212px; }
.bt__pe{ padding:0 24px 24px; }
.bt__pe h3{ font-size:17px; }
.bt__pe p{ margin-top:7px; color:var(--fraco); font-size:14px; line-height:1.5; }

/* o card azul, para quebrar a fileira de lavanda */
.bt--azul{ background:var(--azul); }
.bt--azul .bt__pe h3{ color:#fff; }
.bt--azul .bt__pe p{ color:rgba(255,255,255,.72); }

/* a vitrine entra subindo quando o card aparece */
.bt .vit{ transform:translateY(26px); opacity:0; transition:transform .7s cubic-bezier(.2,.7,.3,1), opacity .5s ease; }
.bt.is-visivel .vit{ transform:none; opacity:1; }

/* --- vitrine: esteira de discos ------------------------------------- */
.vit--esteira{
  display:flex; align-items:center; height:100%;
  /* some nas duas pontas em vez de bater na borda */
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.corrida{ display:flex; gap:18px; width:max-content; padding:0 18px; animation:correr 26s linear infinite; }
.disco{
  display:grid; place-items:center;
  width:78px; height:78px; border-radius:50%;
  box-shadow:var(--sombra);
}
.disco .art{ width:46px; height:46px; }

/* --- vitrine: caixa do dia ------------------------------------------ */
.vit--caixa{ padding:22px 0 0 22px; }
.linhas{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.linhas li{ display:flex; align-items:center; gap:9px; font-size:13px; color:var(--texto); }
.linhas i{ flex:none; width:7px; height:7px; border-radius:50%; }
.linhas span{ flex:1; }
.linhas b{ font-weight:700; color:var(--tinta); }
.linhas .pos{ color:var(--verde); }
/* o quadro branco encosta e sai pela direita */
.mini{
  margin:16px -14px 0 0; padding:14px 16px;
  background:#fff; border-radius:14px 0 0 14px;
  box-shadow:var(--sombra);
}
.mini__rot{ color:var(--fraco); font-size:12px; }
.mini__num{ display:flex; align-items:baseline; gap:6px; margin-top:2px; }
.mini__num b{ color:var(--verde); font-size:20px; font-weight:700; letter-spacing:-.02em; }
.mini__num em{ color:var(--fraco); font-size:12px; font-style:normal; }
.barra{ display:block; height:6px; margin-top:9px; border-radius:3px; background:#e6ecf5; overflow:hidden; }
.barra i{ display:block; height:100%; border-radius:3px; background:var(--verde); }

/* --- vitrine: documentos fiscais (card azul) ------------------------ */
.vit--fiscal{ display:grid; place-items:center; height:100%; }
.pilha{ position:relative; display:flex; align-items:center; justify-content:center; width:100%; }
.doc{
  background:#fff; border-radius:12px; padding:12px 14px;
  box-shadow:var(--sombra-alta);
}
.doc__tipo{ color:var(--fraco); font-size:10px; font-weight:700; letter-spacing:.08em; }
.doc__tipo--forte{ color:var(--azul); }
.doc__num{ margin-top:3px; color:var(--tinta); font-size:12px; font-weight:700; }
.doc__val{ color:var(--texto); font-size:13px; }
.doc__selo{
  display:inline-block; margin-top:8px; padding:3px 9px;
  border-radius:var(--r-pill); background:var(--verde-fundo);
  color:var(--verde); font-size:10px; font-weight:700;
}
.doc--frente{ position:relative; z-index:2; width:132px; animation:doc-subir 5s ease-in-out infinite; }
/* os das pontas ficam meio para fora do card, de propósito */
.doc--lado{ position:absolute; z-index:1; width:104px; opacity:.5; transform:scale(.9); }
.doc--esq{ left:-42px; }
.doc--dir{ right:-42px; }
@keyframes doc-subir{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-7px); }
}

/* --- vitrine: títulos em aberto ------------------------------------- */
.vit--titulos{ padding:22px 0 0 22px; }
.titulos{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.titulos li{ padding-right:22px; }
.titulos .apaga{ opacity:.38; }          /* sugere que a lista continua acima */
.tit__topo{ display:flex; align-items:baseline; gap:8px; font-size:12px; }
.tit__topo span{ flex:1; color:var(--fraco); }
.tit__topo b{ color:var(--tinta); font-weight:700; }
.tit__topo em{ color:var(--fraco); font-size:11px; font-style:normal; }
.titulos .barra{ margin-top:6px; background:#e2e9f3; }
.titulos .barra i{ background:var(--azul-linha); }
.titulos .forte .barra i{ background:var(--azul); }

/* --- vitrine: curva de vendas (card azul) --------------------------- */
.vit--grafico{ position:relative; height:100%; overflow:hidden; }
.curva{ position:absolute; left:0; right:0; bottom:-26px; width:100%; height:130px; }
.curva__linha{
  stroke-dasharray:420; stroke-dashoffset:420;
  /* só desenha quando o card entra na tela, senão passa despercebida */
  animation:curva-desenhar 2.4s ease-out forwards paused;
}
.bt.is-visivel .curva__linha{ animation-play-state:running; }
@keyframes curva-desenhar{ to{ stroke-dashoffset:0; } }
.pin{
  position:absolute; left:50%; top:52px; transform:translateX(-50%);
  z-index:2; padding:9px 14px; text-align:center;
  background:#fff; border-radius:12px; box-shadow:var(--sombra-alta);
}
.pin__mes{ display:block; color:var(--fraco); font-size:11px; }
.pin__val{ color:var(--tinta); font-size:14px; font-weight:700; letter-spacing:-.02em; }
.ponto{
  position:absolute; left:50%; top:120px; z-index:2;
  width:11px; height:11px; margin-left:-5.5px;
  border:3px solid var(--azul); border-radius:50%; background:#fff;
}

/* --- vitrine: balões ------------------------------------------------ */
.vit--balao{ position:relative; padding:26px 24px 0; }
.balao{
  display:flex; align-items:flex-start; gap:13px;
  padding:16px 18px;
  background:#fff; border-radius:16px; box-shadow:var(--sombra-alta);
}
.balao p{ font-size:14px; color:var(--texto); line-height:1.5; }
.balao b{ color:var(--tinta); }
.balao__marca{
  flex:none; display:grid; place-items:center;
  width:32px; height:32px; border-radius:10px;
  background:var(--azul); color:#fff;
}
.balao__marca svg{ width:16px; height:16px; }
/* o segundo balão assoma por baixo e é cortado pela borda */
.balao--fundo{
  margin:12px 26px -18px 26px;
  opacity:.55; transform:scale(.97);
}
.balao--fundo .balao__marca{ background:var(--verde); }

/* =========================================================================
   O APLICATIVO — faixa escura, texto de um lado e o aparelho do outro
   Nada de três cartões claros iguais lado a lado: aqui o aparelho é um só,
   grande, com um segundo atrás e o cupom saindo da impressora.
   ========================================================================= */
.app{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.app__intro{ margin-top:14px; color:#9db6c9; font-size:16px; }

.app__lista{ list-style:none; margin:30px 0; padding:0; display:grid; gap:20px; }
.app__lista li{ display:flex; gap:14px; }
.app__lista h3{ font-size:16px; color:#fff; }
.app__lista p{ margin-top:4px; color:#8fa9bd; font-size:14px; line-height:1.5; }
.app__arte{
  flex:none; display:grid; place-items:center;
  width:44px; height:44px; border-radius:11px;
  background:rgba(255,255,255,.07);
}
.app__arte .art{ width:28px; height:28px; }

/* o aparelho */
.app__dir{ position:relative; display:grid; place-items:center; min-height:480px; }
.term{
  position:relative; z-index:2;
  width:232px; padding:26px 11px 30px;
  background:linear-gradient(160deg,#39434f,#101820 42%,#080d12);
  border-radius:26px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.7), inset 0 0 0 1.5px rgba(255,255,255,.1);
  transform:rotate(-4deg);
  animation:app-flutuar 7s ease-in-out infinite;
}
@keyframes app-flutuar{
  0%,100%{ transform:rotate(-4deg) translateY(0); }
  50%    { transform:rotate(-4deg) translateY(-11px); }
}
.term__fenda{
  position:absolute; left:50%; top:12px; transform:translateX(-50%);
  width:116px; height:5px; border-radius:3px;
  background:#04070a; box-shadow:inset 0 1px 2px rgba(0,0,0,.9);
}
.term__tela{ border-radius:13px; overflow:hidden; background:#fff; }
.term__tela img{ width:100%; display:block; }
.term__leitor{
  position:absolute; left:50%; bottom:12px; transform:translateX(-50%);
  width:76px; height:5px; border-radius:3px; background:rgba(255,255,255,.18);
}
/* o segundo aparelho, atrás e meio para fora */
.term--atras{
  position:absolute; z-index:1; right:-30px; top:30px;
  width:196px; padding:20px 9px 24px;
  opacity:.38; transform:rotate(8deg); animation:none;
}

/* o cupom saindo da fenda da impressora */
.app__cupom{
  position:absolute; z-index:3; left:calc(50% - 158px); top:10px;
  display:block; width:134px; padding:12px 12px 14px;
  background:#fff;
  box-shadow:0 12px 26px -10px rgba(0,0,0,.6);
  font-size:9px; letter-spacing:.06em; color:#334155;
  transform-origin:50% 0;
  animation:cupom-sair 6s ease-in-out infinite 1.2s;
}
.app__cupom b{ display:block; font-weight:700; }
.app__cupom i{ display:block; height:3px; margin:6px 0; background:#e2e8f0; border-radius:2px; }
.app__cupom i:nth-child(3){ width:70%; }
.app__cupom i:nth-child(4){ width:85%; }
.app__cupom-total{ margin-top:8px; padding-top:7px; border-top:1px dashed #cbd5e1; }
@keyframes cupom-sair{
  0%,8%    { transform:scaleY(.04); opacity:0; }
  34%,74%  { transform:scaleY(1);   opacity:1; }
  94%,100% { transform:scaleY(1) translateY(-16px); opacity:0; }
}

/* a esteira de recursos vira uma faixa fina própria */
.sec--fina{ padding:30px 0; background:var(--escuro); }
.trio__arte{
  display:grid; place-items:center;
  width:60px; height:60px; margin-bottom:16px;
  border-radius:16px; background:rgba(255,255,255,.07);
}
.trio__arte .art{ width:38px; height:38px; }
/* =========================================================================
   TELAS MENORES
   ========================================================================= */
@media (max-width:980px){
  :root{ --sec:72px; }
  .nav__menu{ display:none; }
  .nav__sanduiche{
    display:grid; place-items:center;
    width:44px; height:44px; border:0; border-radius:50%;
    background:#fff; box-shadow:var(--sombra); cursor:pointer;
  }
  .nav.is-aberto .nav__menu{
    display:grid; position:absolute; left:24px; right:24px; top:72px;
    padding:14px; border-radius:var(--r);
  }
  .cena__avisos{ display:none; }
  .faq{ grid-template-columns:1fr; gap:32px; }
  .homolog{ grid-template-columns:1fr; gap:32px; }
  .trio,.mods{ grid-template-columns:1fr; }
  .app{ grid-template-columns:1fr; gap:36px; }
  .app__dir{ min-height:420px; }
  .term--atras,.app__cupom{ display:none; }
  .bento{ grid-template-columns:repeat(2,1fr); }
  .bt--1,.bt--2,.bento > .card{ grid-column:span 2; }
  .bento--3{ grid-template-columns:1fr; }
  .card--largo{ grid-template-columns:1fr; }
  .card--largo .card__txt{ padding:28px 28px 0; }
  .card--largo .card__tela{ margin:20px; }
  .foot__topo{ grid-template-columns:1fr 1fr; gap:32px; }
}
@media (max-width:560px){
  .hero{ padding-top:104px; }
  .selos{ grid-template-columns:1fr; }
  .foot__topo{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
  [data-rv]{ opacity:1; transform:none; }
}