/* tonystars.com.br — tema do Tony Stars sobre a base comum (site.css). Identidade oficial: cabeça pelúcia #F2A64A,
   cacau #4A3628 → #1A1512, rede de 3 nós âmbar #FFC44A (só no Tony), Inter 800/400. */
:root { --tony-topo: #ffc37a; --tony-base: #e8903a; --caramelo: #8a4a1e; --fundo: #15110e; --cartao: #211a15; --cartao-2: #2a211b; --borda: rgba(255,255,255,.09); --texto: #f4efe8; --texto-2: #cfc3b8; }
body { background: var(--fundo); color: var(--texto); }
.leve, .olho { color: #b4a79b; }
.olho::before { background: var(--tony); border-radius: 50%; }
.topo.rolou { background: rgba(21,17,14,.82); box-shadow: 0 1px 0 var(--borda); }
.marca-tony { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -.02em; font-size: 1.15rem; color: #fff; text-decoration: none; }
.marca-tony img { width: 34px; height: 34px; border-radius: 9px; }
.nav a { color: var(--texto-2); }
.nav a:hover, .nav a[aria-current] { background: rgba(255,255,255,.07); color: #fff; }
.bt-entrar { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.bt-entrar:hover { background: #fff; color: var(--tinta); }
.menu-bt { background: rgba(255,255,255,.08); }
.menu-bt span, .menu-bt span::before, .menu-bt span::after { background: #fff; }
.gaveta { background: var(--fundo); border-color: var(--borda); }
.gaveta a:not(.bt) { border-color: var(--borda); }
.bt-ambar { background: var(--tony); color: var(--tinta); box-shadow: 0 8px 24px -10px rgba(242,166,74,.8); }
.bt-ambar:hover { background: var(--tony-topo); }
.bt-borda { border-color: rgba(255,255,255,.45); color: #fff; }
.bt-borda:hover { background: #fff; color: var(--tinta); }
.bt-tinta { background: #fff; color: var(--tinta); }
.bt-tinta:hover { background: var(--tony-topo); }
.faixa-previa { background: #000; }
.hero::before { background: radial-gradient(closest-side, rgba(242,166,74,.28), rgba(242,166,74,0)); }
.hero h1 .destaque { background: linear-gradient(135deg, var(--tony-topo), var(--tony)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-mini svg { color: var(--tony); }
.prova { background: var(--cartao); border-color: var(--borda); }
.prova .envolve { background: var(--borda); }
.prova .item { background: var(--cartao); }
.prova span { color: #b4a79b; }
.papel2 { background: #1b1612; }
.passo, .cartao, .plano, .metodo, .plataforma { background: var(--cartao); border-color: var(--borda); color: var(--texto); }
.passo p, .cartao p, .metodo span, .plataforma small, .plano .sub, .plano .preco span { color: #b4a79b; }
.passo .n { background: var(--cartao-2); }
.passo.ativo { border-color: var(--tony); }
.passo.ativo .n { background: var(--tony); color: var(--tinta); }
.cartao .ic { background: var(--tony); color: var(--tinta); }
.plano li::before { background-color: var(--tony); }
.plano .esqueleto { background: linear-gradient(90deg, #2a211b, #3a2e25, #2a211b); background-size: 200% 100%; }
.plataforma .estado { background: var(--cartao-2); color: #b4a79b; }
.plataforma.sugerido { box-shadow: 0 0 0 3px var(--tony); }
.plataforma.sugerido::after { background: var(--tony); color: var(--tinta); }
.metodo .ic { background: var(--cartao-2); }
.metodo:hover { border-color: var(--tony); }
.faq details { border-color: var(--borda); }
.faq summary::after { border-color: var(--tony); }
.faq .resp { color: var(--texto-2); }
.form input, .form textarea, .form select, .espera input { background: var(--cartao); border-color: var(--borda); color: var(--texto); }
.form .lgpd { color: #b4a79b; }
.form [aria-invalid="true"] { border-color: #ff8a6e; }
.form[aria-busy="true"] button[type="submit"] { opacity: .7; cursor: progress; }
.retorno.erro { color: #ffb4a3; }
.retorno.ok { color: var(--tony); }
.rascunho { background: rgba(255,196,74,.1); color: #f3d69a; border-color: rgba(255,196,74,.45); }
.licencas-indice a { background: var(--cartao); border-color: var(--borda); color: var(--texto); }
.licencas-indice a:hover { background: var(--cartao-2); border-color: var(--tony-base); }
.licenca-texto { background: var(--cartao); border-color: var(--borda); color: var(--texto-2); }
.licenca-origem { color: #b4a79b; }
.escura { background: #0f0c0a; }
.cta-final { background: radial-gradient(800px 400px at 50% 120%, rgba(242,166,74,.35), transparent 70%), #0f0c0a; }
.rodape { background: #0b0908; }
.barra-cel { background: rgba(42,33,27,.94); }

/* Tony vivo (SVG) */
.tony-vivo { position: relative; width: min(420px, 82vw); margin: 0 auto; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tony-vivo svg { overflow: visible; filter: drop-shadow(0 40px 60px rgba(0,0,0,.55)); }
.tony-vivo .corpo { transform-origin: 50% 90%; transition: transform .5s var(--ease); }
.tony-vivo.cutucado .corpo { animation: cutuca .6s var(--ease); }
@keyframes cutuca { 30% { transform: scale(1.08, .92); } 60% { transform: scale(.96, 1.05) translateY(-4px); } }
.tony-vivo .no { transform-box: fill-box; transform-origin: center; animation: no-pulsa 2.4s ease-in-out infinite; }
.tony-vivo .no:nth-of-type(2) { animation-delay: .3s; } .tony-vivo .no:nth-of-type(3) { animation-delay: .6s; }
@keyframes no-pulsa { 50% { transform: scale(1.35); filter: drop-shadow(0 0 6px #ffc44a); } }
.tony-vivo .olhos { transition: transform .12s linear; }
.tony-vivo .palpebra { transform-box: fill-box; transform-origin: center top; transform: scaleY(0); }
.tony-vivo.pisca .palpebra { animation: pisca-olho .18s ease-in-out; }
@keyframes pisca-olho { 50% { transform: scaleY(1); } }
.balao { position: absolute; top: 4%; right: -2%; background: #fff; color: var(--tinta); font-weight: 700; font-size: .92rem; padding: 10px 14px; border-radius: 16px 16px 16px 4px; box-shadow: var(--sombra); max-width: 220px; opacity: 0; transform: translateY(8px) scale(.95); transition: opacity .35s, transform .35s var(--ease); pointer-events: none; }
.balao.on { opacity: 1; transform: none; }
.sombra-chao { width: 60%; height: 18px; margin: -6px auto 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.6), transparent); }

/* Notch do Mac */
.mac { position: relative; border-radius: 18px 18px 0 0; background: linear-gradient(180deg, #2a211b, #1a1512); border: 1px solid var(--borda); border-bottom: 0; padding: 0 0 28px; overflow: hidden; min-height: 300px; }
.mac-barra { height: 32px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; font-size: .78rem; color: #cfc3b8; background: rgba(0,0,0,.25); }
.mac-barra .esq { display: flex; gap: 14px; } .mac-barra .esq b { color: #fff; }
.notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 190px; height: 32px; background: #000; border-radius: 0 0 16px 16px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; transition: width .55s var(--ease), height .55s var(--ease), border-radius .55s var(--ease); z-index: 2; overflow: hidden; color: #fff; }
.notch .mini { width: 22px; height: 22px; flex: none; }
.notch .pontos { display: flex; gap: 3px; } .notch .pontos i { width: 5px; height: 5px; border-radius: 50%; background: var(--ambar); animation: pulo 1s infinite; }
.notch .pontos i:nth-child(2) { animation-delay: .15s; } .notch .pontos i:nth-child(3) { animation-delay: .3s; }
.notch .conteudo { position: absolute; inset: 40px 16px 16px; opacity: 0; transition: opacity .3s; text-align: left; }
.notch.aberto { width: min(440px, 92%); height: 196px; border-radius: 0 0 26px 26px; }
.notch.aberto .conteudo { opacity: 1; transition-delay: .3s; }
.notch .card { display: flex; gap: 12px; align-items: center; background: #15110e; border-radius: 16px; padding: 12px; }
.notch .card img { width: 54px; height: 54px; border-radius: 12px; flex: none; }
.notch .card small { color: #a99c90; display: block; font-size: .74rem; }
.notch .card b { display: block; font-size: .92rem; }
.notch .acoes { display: flex; gap: 8px; margin-top: 10px; }
.notch .acoes button { flex: 1; min-height: 38px; border-radius: 999px; border: 0; font-weight: 700; font-size: .85rem; cursor: pointer; }
.notch .acoes .sim { background: var(--tony); color: var(--tinta); } .notch .acoes .nao { background: #2a211b; color: #fff; }
.mac-mesa { padding: 64px 22px 0; display: grid; gap: 12px; }
.mac-mesa .linha { height: 12px; border-radius: 6px; background: rgba(255,255,255,.06); }
.mac-legenda { font-size: .85rem; color: #b4a79b; text-align: center; margin-top: 12px; min-height: 1.4em; }

/* O que ele faz */
.faz { display: grid; gap: 14px; }
@media (min-width: 760px) { .faz { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .faz { grid-template-columns: repeat(3, 1fr); } }
.faz .cartao { display: flex; flex-direction: column; min-height: 300px; }
.faz .cena { margin-top: auto; padding-top: 16px; display: grid; gap: 7px; }
.msg { font-size: .84rem; padding: 8px 12px; border-radius: 14px; max-width: 90%; line-height: 1.4; }
.msg.cli { background: #2f3b2f; color: #e7f3e7; align-self: start; border-bottom-left-radius: 4px; }
.msg.tony { background: #3a2a1d; color: #ffe2bf; justify-self: end; border-bottom-right-radius: 4px; }
.js .faz .cena > * { opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.js .faz .cartao.visto .cena > * { opacity: 1; transform: none; }
.js .faz .cartao.visto .cena > *:nth-child(2) { transition-delay: .5s; } .js .faz .cartao.visto .cena > *:nth-child(3) { transition-delay: 1s; } .js .faz .cartao.visto .cena > *:nth-child(4) { transition-delay: 1.5s; }
.item-cena { display: flex; justify-content: space-between; gap: 10px; font-size: .84rem; padding: 9px 12px; border-radius: 12px; background: var(--cartao-2); }
.item-cena b { color: var(--tony); white-space: nowrap; }

/* Estados reais do Tony */
.estados { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.estado-t { text-align: center; }
.estado-t img { width: 100%; max-width: 180px; margin: 0 auto 10px; border-radius: 24px; border: 1px solid var(--borda); }
.estado-t b { display: block; } .estado-t span { color: #b4a79b; font-size: .88rem; }

/* Como funciona (rede) */
.rede { position: relative; display: grid; gap: 16px; }
@media (min-width: 900px) { .rede { grid-template-columns: 1fr 1.2fr 1fr; align-items: center; } }
.rede svg.linhas { display: none; }
@media (min-width: 900px) { .rede svg.linhas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } }
.rede .linhas path { stroke: var(--ambar); stroke-width: 2; fill: none; stroke-dasharray: 6 10; animation: corre 1.2s linear infinite; opacity: .6; }
@keyframes corre { to { stroke-dashoffset: -32; } }
.no-rede { position: relative; z-index: 1; background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); padding: 20px; }
.no-rede.centro { background: linear-gradient(160deg, #4a3628, #1a1512); border-color: rgba(242,166,74,.4); text-align: center; padding: 28px; }
.no-rede.centro img { width: 84px; margin: 0 auto 12px; border-radius: 20px; }
.no-rede h3 { font-size: 1.15rem; }
.no-rede p { color: #b4a79b; font-size: .93rem; margin: 0; }

/* Junto com o BaitaOS e a FabIA */
.completo { display: grid; gap: 28px; align-items: center; }
@media (min-width: 980px) { .completo { grid-template-columns: 1fr 1.1fr; gap: 56px; } }
.completo .print { border-radius: 16px; overflow: hidden; border: 1px solid var(--borda); box-shadow: 0 40px 90px -30px rgba(0,0,0,.8); }
.selos-prod { display: flex; gap: 10px; margin: 18px 0 24px; }
.selos-prod img { width: 52px; height: 52px; border-radius: 14px; }
.selos-prod span { align-self: center; font-weight: 800; color: #b4a79b; }
@media (prefers-reduced-motion: reduce) { .tony-vivo .no, .notch .pontos i, .rede .linhas path { animation: none; } }
@media (min-width: 1000px) { .planos.tres { grid-template-columns: repeat(3, 1fr); max-width: 1040px; margin-inline: auto; } }

.bt-baixar-cel { background: rgba(255,255,255,.08); color: #fff; }
@media (max-width: 560px) { .notch.aberto { height: 250px; } }
.marca-tony { white-space: nowrap; } @media (max-width: 420px) { .marca-tony { font-size: 1rem; gap: 8px; } .marca-tony img { width: 30px; height: 30px; } }
