/* Tempo Livre, site imersivo 3D (tema claro: branco + terracota, textos em azul)
   Marca: Manual de Marca (terracota predominante, azul, marfim; Marcellus + Montserrat). */

@font-face { font-family: "Marcellus"; src: url("../fonts/Marcellus-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --terracota: #c66f4e;
  --terracota-escuro: #a85a3d;     /* grafismos sobre terracota */
  --terracota-texto: #a3543a;
  --terracota-claro: #d88466;      /* texto pequeno sobre azul (5,5:1) */      /* texto pequeno sobre branco (5,4:1) */
  --azul: #102536;
  --azul-70: rgba(16, 37, 54, .76);
  --branco: #ffffff;
  --marfim: #f2ede3;
  --papel: #f8f4ee;                /* cards e paineis sobre branco */
  --linha: rgba(16, 37, 54, .12);
  --serif: "Marcellus", "Georgia", serif;
  --sans: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --coluna: 1180px;
  --gutter: clamp(20px, 5vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 16px/1.7 var(--sans); color: var(--azul); background: var(--marfim); -webkit-font-smoothing: antialiased; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; }
p { margin: 0 0 16px; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; border-radius: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--azul); color: var(--branco); padding: 10px 16px; font-weight: 600; text-decoration: none; }
.pular:focus { top: 16px; }

.olho { font-size: 12px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--terracota-texto); margin-bottom: 14px; }
.tit { font-size: clamp(30px, 3.5vw, 48px); line-height: 1.1; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 26px; color: var(--azul); }
.centro { text-align: center; }
.nota { font-size: 13px; color: var(--azul-70); }

/* ---------- botoes ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 15px 28px; border-radius: 1px;
  font: 600 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; background: none; color: var(--azul); transition: background .25s, color .25s, border-color .25s;
}
.btn .seta { transition: transform .25s var(--ease); font-size: 15px; }
.btn:hover .seta { transform: translateX(4px); }
.btn-linha { border-color: var(--azul); }
.btn-linha:hover { background: var(--azul); color: var(--branco); }
.btn-terra { border-color: var(--terracota); color: var(--terracota-texto); }
.btn-terra:hover { background: var(--terracota); color: var(--azul); }
.btn-terra-cheio { background: var(--terracota); color: var(--azul); }
.btn-terra-cheio:hover { background: var(--azul); color: var(--branco); }
.btn-p { padding: 12px 18px; font-size: 11px; }

/* ---------- topo ---------- */
.topo { position: fixed; inset: 0 0 auto; z-index: 50; border-bottom: 1px solid transparent; transition: background .35s, border-color .35s; }
.topo-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 22px var(--gutter); transition: padding .35s; }
.topo.rolado { background: rgba(255, 255, 255, .94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom-color: var(--linha); }
.topo.rolado .topo-in { padding-top: 12px; padding-bottom: 12px; }
.topo-esq { display: flex; align-items: center; gap: 30px; }
.topo-dir { display: flex; align-items: center; justify-content: flex-end; gap: 18px; }
.topo-link { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; position: relative; padding: 6px 0; }
.topo-link::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--terracota); transition: right .3s var(--ease); }
.topo-link:hover::after { right: 0; }
.topo-logo img { height: 34px; width: auto; }
.social svg { width: 20px; height: 20px; fill: none; stroke: var(--azul); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.social .cheio { fill: var(--azul); stroke: none; }
.menu-btn { position: relative; width: 40px; height: 40px; margin-left: -8px; background: none; border: 0; cursor: pointer; z-index: 61; }
.menu-ico, .menu-ico::before, .menu-ico::after { content: ""; position: absolute; left: 9px; width: 22px; height: 1.6px; background: var(--azul); transition: transform .3s, background .3s; }
.menu-ico { top: 19px; }
.menu-ico::before { left: 0; top: -7px; }
.menu-ico::after { left: 0; top: 7px; }
.menu-btn[aria-expanded="true"] .menu-ico { background: transparent; }
.menu-btn[aria-expanded="true"] .menu-ico::before { transform: translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-ico::after { transform: translateY(-7px) rotate(-45deg); }
.menu {
  position: fixed; inset: 0; z-index: 49; display: flex; flex-direction: column; justify-content: center; gap: 6px;
  padding: 100px var(--gutter) 60px calc(var(--gutter) + 6vw); background: var(--branco);
  border-left: 10px solid var(--terracota); opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s;
}
.menu.aberto { opacity: 1; visibility: visible; }
.menu a { font-family: var(--serif); font-size: clamp(30px, 5vw, 64px); line-height: 1.15; text-decoration: none; color: var(--azul); text-transform: uppercase; letter-spacing: .03em; width: fit-content; }
.menu a:hover { color: var(--terracota); }

.anim-botao {
  background: none; border: 1px solid var(--linha); border-radius: 999px; color: var(--azul); cursor: pointer;
  font: 600 10.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; padding: 9px 14px; white-space: nowrap;
}
.anim-botao:hover { border-color: var(--azul); }
.anim-menu { margin-top: 26px; width: fit-content; font-size: 11px; }

/* ---------- hero: conceito da identidade (azul profundo, folhas escuras, luz acobreada) ---------- */
.hero { position: sticky; top: 0; z-index: 0; height: 100vh; height: 100svh; min-height: 640px; overflow: hidden; background: #09141b; color: var(--marfim); }
.hero-veu { position: absolute; inset: 0; z-index: 3; background: #050b10; opacity: 0; pointer-events: none; }
.hero-fundo {
  position: absolute; inset: 0;
  background:
    radial-gradient(34% 44% at 88% 10%, rgba(198, 111, 78, .55), transparent 70%),
    radial-gradient(26% 30% at 6% 92%, rgba(198, 111, 78, .16), transparent 70%),
    radial-gradient(58% 56% at 50% 46%, #152c3c 0%, rgba(23, 50, 75, 0) 72%),
    linear-gradient(180deg, #0c1a24 0%, #09141b 100%);
}
.hero-fundo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(4, 10, 16, .65) 100%); }
.hero-3d { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 130px; pointer-events: none; background: linear-gradient(180deg, rgba(8, 18, 27, .75), rgba(8, 18, 27, 0)); }
.hero-centro {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 90px var(--gutter) 150px; text-align: center; pointer-events: none;
}
.hero-marca { margin: 0; }
.hero-marca img { width: min(500px, 76vw); height: auto; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .45)); animation: surge 1.8s var(--ease) both .2s; }
@keyframes surge { from { opacity: 0; transform: translateY(18px); filter: blur(4px); } }
.hero-base {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: 30px; z-index: 2;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
}
.hero-desc { font-size: 13.5px; font-weight: 500; line-height: 1.6; max-width: 370px; margin: 0; color: rgba(242, 237, 227, .88); }
.hero-base::before {
  content: ""; position: absolute; z-index: -1; left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); bottom: -30px; height: 200px;
  background: linear-gradient(0deg, rgba(8, 18, 27, .85) 25%, rgba(8, 18, 27, 0)); pointer-events: none;
}
.hero-base .btn-linha { border-color: rgba(242, 237, 227, .7); color: var(--marfim); }
.hero-base .btn-linha:hover { background: var(--marfim); color: var(--azul); }
.hero-rolar { justify-self: end; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; color: var(--marfim); }
.hero-rolar span { display: inline-block; margin-left: 8px; color: var(--terracota-claro); animation: desce 1.8s ease-in-out infinite; }
@keyframes desce { 50% { transform: translateY(5px); } }

/* topo claro enquanto esta sobre o hero escuro */
.logo-escuro { display: none; }
.topo.rolado .logo-claro { display: none; }
.topo.rolado .logo-escuro { display: inline; }
.topo:not(.rolado) { color: var(--marfim); }
.topo:not(.rolado) .menu-ico, .topo:not(.rolado) .menu-ico::before, .topo:not(.rolado) .menu-ico::after { background: var(--marfim); }
.topo:not(.rolado) .btn-linha { border-color: rgba(242, 237, 227, .7); color: var(--marfim); }
.topo:not(.rolado) .btn-linha:hover { background: var(--marfim); color: var(--azul); }
.topo:not(.rolado) .anim-botao { color: var(--marfim); border-color: rgba(242, 237, 227, .35); background: rgba(255, 255, 255, .06); }
.topo:not(.rolado) .social svg { stroke: var(--marfim); }
.topo:not(.rolado) .social .cheio { fill: var(--marfim); }

/* ---------- palco marfim com paineis chanfrados ---------- */
.palco { position: relative; z-index: 1; background: var(--marfim); padding: 18px 0 0; box-shadow: 0 -30px 60px -30px rgba(16, 37, 54, .35); overflow: hidden; overflow: clip; }
.painel {
  --c: 44px; position: relative; max-width: 1280px; margin: 0 auto 18px; padding: clamp(60px, 7vw, 96px) clamp(22px, 6vw, 80px);
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c)));
}
.claro { background: var(--branco); color: var(--azul); }
.escuro { background: var(--azul); color: var(--marfim); }
.mira { position: absolute; width: 22px; height: 22px; pointer-events: none; z-index: 2; }
.mira::before, .mira::after { content: ""; position: absolute; background: var(--terracota); }
.mira::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.mira::after { top: 50%; left: 0; right: 0; height: 1px; }
.m1 { top: 60px; left: 2.5%; }
.m2 { top: 48%; right: 2.5%; }

.etq { font: 500 11px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--terracota-texto); margin: 0 0 18px; }
.etq::before { content: "[ "; }
.etq::after { content: " ]"; }
.escuro .etq { color: var(--terracota-claro); }
.tit { font-size: clamp(34px, 4.2vw, 58px); line-height: 1.02; }
.escuro .tit { color: var(--marfim); }
.tit .acento { color: var(--terracota); }
.tit .t2 { color: rgba(16, 37, 54, .38); }
.escuro .tit .t2 { color: rgba(242, 237, 227, .42); }
.lead { font-size: 15px; max-width: 380px; color: var(--azul-70); margin-bottom: 26px; }
.escuro .lead { color: rgba(242, 237, 227, .72); }
.escuro .nota { color: rgba(242, 237, 227, .55); }

.seta-c { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--terracota); flex: none; transition: transform .3s var(--ease), background .3s, border-color .3s; }
.seta-c svg { width: 18px; height: 18px; fill: none; stroke: var(--azul); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.link-c { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; font: 600 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.link-c:hover .seta-c { transform: translateX(4px); }
.checks { list-style: none; margin: 26px 0 34px; padding: 0; }
.checks li { position: relative; padding: 7px 0 7px 34px; font-size: 14px; font-weight: 500; }
.checks li::before {
  content: ""; position: absolute; left: 0; top: 10px; width: 18px; height: 18px; border: 1.5px solid var(--terracota); border-radius: 3px;
  background: linear-gradient(var(--terracota), var(--terracota)) center/6px 6px no-repeat;
}

/* sobre + metodo */
.sobre { display: grid; grid-template-columns: 1fr 1.15fr .75fr; gap: clamp(24px, 3vw, 44px); align-items: center; }
.sobre-3d {
  --c: 28px; position: relative; height: 440px; background: var(--papel);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
}
.sobre-3d canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.corte { position: absolute; left: 50%; top: 10%; bottom: 10%; width: 2px; background: var(--terracota); box-shadow: 0 0 14px rgba(198, 111, 78, .45); }
.rot { position: absolute; bottom: 5%; font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--terracota-texto); }
.rot-esq { right: calc(50% + 16px); }
.rot-dir { left: calc(50% + 16px); }
.micro { position: absolute; top: 22px; left: 26px; margin: 0; font: 600 10px/1.6 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--azul-70); }
.etq-dir { text-align: right; }
.metodo ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linha); }
.metodo li { display: flex; flex-direction: column; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--linha); }
.metodo b { font: 400 30px/1.05 var(--serif); }
.metodo span { font-size: 13px; color: var(--azul-70); }

/* servicos */
.servicos { display: grid; grid-template-columns: .8fr 2fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.serv-grade { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.srv {
  --c: 18px; position: relative; display: flex; flex-direction: column; min-height: 230px; padding: 22px 20px 20px;
  background: linear-gradient(160deg, #193346, #10222f); clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, 0 100%);
  transition: transform .4s var(--ease), background .4s;
}
.srv:hover { transform: translateY(-4px); background: linear-gradient(160deg, #203f56, #132a3b); }
.srv-n { font: 500 11px/1 var(--sans); letter-spacing: .14em; color: rgba(242, 237, 227, .5); }
.srv .ico { width: 40px; height: 40px; margin: 22px 0 14px; fill: none; stroke: var(--terracota-claro); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.srv .ico .cheio { fill: var(--terracota-claro); stroke: none; }
.srv h3 { font: 400 19px/1.2 var(--serif); color: var(--marfim); margin: 0 0 6px; }
.srv p { font-size: 12.5px; color: rgba(242, 237, 227, .62); margin: 0 0 16px; }
.srv .seta-c { margin-top: auto; width: 38px; height: 38px; background: transparent; border: 1px solid rgba(242, 237, 227, .35); }
.srv .seta-c svg { stroke: var(--marfim); }
.srv:hover .seta-c { background: var(--terracota); border-color: var(--terracota); }
.srv:hover .seta-c svg { stroke: var(--azul); }
.serv-cab .link-c { margin-top: 6px; color: var(--marfim); }
.serv-cab .tit { font-size: clamp(30px, 3.1vw, 44px); }
.servicos { grid-template-columns: 1fr 2.2fr; }

/* diferenciais */
.difs { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; }
.chip-3d { position: relative; height: 520px; }
.chip-3d canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.difs-lista { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
.difs-lista li { display: flex; align-items: center; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--linha); font: 400 18px/1.2 var(--serif); }
.ico-d { width: 34px; height: 34px; flex: none; fill: none; stroke: var(--terracota); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* faixa de ferramentas */
.faixa { position: relative; padding: 70px 0 64px; color: var(--azul); }
.faixa::before { content: ""; position: absolute; left: -5%; right: -5%; top: 22%; height: 58%; background: var(--branco); transform: rotate(-2.2deg); box-shadow: 0 14px 34px -18px rgba(16, 37, 54, .3); border-top: 2px solid var(--terracota); border-bottom: 2px solid var(--terracota); }
.faixa-rot { position: relative; text-align: center; font-size: 12px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; margin-bottom: 18px; }
.letreiro { position: relative; overflow: hidden; transform: rotate(-2.2deg); }
.letreiro-in { display: flex; width: max-content; gap: 34px; align-items: center; animation: letreiro 52s linear infinite; padding: 10px 0; }
.letreiro-in span { font: 400 clamp(34px, 5vw, 66px)/1.1 var(--serif); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; color: var(--azul); }
.letreiro-in i { font-style: normal; color: var(--terracota); font-size: 26px; }
@keyframes letreiro { to { transform: translateX(-50%); } }
.letreiro-2 { margin-top: 8px; }
.letreiro-2 .letreiro-in { animation-duration: 60s; }
.letreiro-in.reverso { animation-direction: reverse; }
.letreiro-2 .letreiro-in span { font: 600 clamp(13px, 1.3vw, 17px)/1.4 var(--sans); letter-spacing: .26em; color: var(--terracota-escuro); }
.letreiro-2 .letreiro-in i { font-size: 14px; color: var(--terracota); }

/* portfolio: leque com as logos dos clientes */
.sec-portfolio::before { background: linear-gradient(180deg, var(--papel), transparent 40%); }
.leque-palco { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(30px, 5vw, 70px); align-items: start; margin-top: 40px; }
.leque { position: sticky; top: 110px; height: 400px; }
.carta {
  --x: 0%; --y: 0%; --r: 0deg; --s: 1;
  position: absolute; left: 50%; top: 50%; width: 31%; aspect-ratio: 4 / 5; display: grid; place-items: center;
  background: var(--branco); border: 1px solid var(--linha); border-radius: 14px; box-shadow: 0 26px 44px -22px rgba(16, 37, 54, .45);
  transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(var(--r)) scale(var(--s)); transform-origin: 50% 110%;
  transition: transform 1s var(--ease), box-shadow .5s var(--ease);
}
.carta img { width: 72%; height: auto; max-height: 70%; object-fit: contain; }
.carta[data-carta="0"] { --r: -3deg; z-index: 1; }
.carta[data-carta="1"] { --r: 2deg; z-index: 2; }
.carta[data-carta="2"] { --r: -1deg; z-index: 3; }
.carta[data-carta="3"] { --r: 3deg; z-index: 4; }
.leque-palco.visto .carta[data-carta="0"], .sem-animacao .carta[data-carta="0"] { --x: -116%; --y: 9%; --r: -12deg; }
.leque-palco.visto .carta[data-carta="1"], .sem-animacao .carta[data-carta="1"] { --x: -39%; --y: -2%; --r: -4deg; }
.leque-palco.visto .carta[data-carta="2"], .sem-animacao .carta[data-carta="2"] { --x: 39%; --y: -2%; --r: 4deg; }
.leque-palco.visto .carta[data-carta="3"], .sem-animacao .carta[data-carta="3"] { --x: 116%; --y: 9%; --r: 12deg; }
.leque-palco.visto .carta.foco { --y: -16%; --s: 1.06; z-index: 5; box-shadow: 0 36px 60px -24px rgba(198, 111, 78, .6); }
.leque-lista { list-style: none; margin: 0; padding: 0; }
.leque-lista li { padding: 18px 0 18px 22px; border-left: 2px solid var(--linha); transition: border-color .35s, background .35s; }
.leque-lista li.ativo { border-left-color: var(--terracota); background: linear-gradient(90deg, rgba(198, 111, 78, .07), transparent); }
.leque-lista h3 { font-size: 22px; line-height: 1.25; margin-bottom: 8px; }
.leque-lista p:not(.proj-tag) { font-size: 14px; color: var(--azul-70); margin-bottom: 10px; }
.proj-tag { margin: 0 0 4px; font-size: 10.5px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--terracota-texto); }
.proj-link { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--azul); border-bottom: 1.5px solid var(--terracota); padding-bottom: 3px; }
.proj-link:hover { color: var(--terracota-texto); }

/* pastas por segmento */
.pastas { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; }
.pasta {
  position: relative; font: 600 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--marfim);
  background: rgba(242, 237, 227, .06); border: 1px solid rgba(242, 237, 227, .18); border-radius: 4px 12px 4px 4px; padding: 13px 18px 12px; cursor: pointer;
  transition: background .3s, color .3s, transform .3s var(--ease);
}
.pasta::before { content: ""; position: absolute; left: 10px; top: -6px; width: 34%; height: 7px; background: inherit; border: 1px solid var(--linha); border-bottom: 0; border-radius: 5px 5px 0 0; }
.pasta:hover { transform: translateY(-2px); }
.pasta.ativa { background: var(--terracota); color: var(--azul); border-color: var(--terracota); }
.pasta.ativa::before { background: var(--terracota); border-color: var(--terracota); }
.pasta::before { border-color: rgba(242, 237, 227, .18); }

/* solucoes (cards que abrem o prototipo) */
.solucoes-tit { margin-top: clamp(70px, 8vw, 100px); }
.solucoes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.solucoes li[hidden] { display: none; }
.sol {
  --c: 16px; position: relative; height: 100%; min-height: 190px; padding: 20px 18px 18px; display: flex; flex-direction: column;
  background: linear-gradient(160deg, #193346, #10222f); clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, 0 100%);
  transition: transform .4s var(--ease), background .4s;
}
.sol:hover { transform: translateY(-4px); background: linear-gradient(160deg, #203f56, #132a3b); }
.sol-n { font: 500 11px/1 var(--sans); letter-spacing: .14em; color: rgba(242, 237, 227, .5); margin-bottom: 18px; }
.sol-tag { font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--terracota-texto); margin-bottom: 8px; }
.sol .sol-tag { color: var(--terracota-claro); }
.sol h4 { font: 400 18px/1.25 var(--serif); margin: 0 0 16px; color: var(--marfim); }
.sol-ver {
  margin-top: auto; align-self: flex-start; background: none; border: 0; padding: 0; cursor: pointer;
  font: 600 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--azul);
}
.sol-ver::after { content: ""; position: absolute; inset: 0; }
.sol .seta-c { width: 38px; height: 38px; background: transparent; border: 1px solid rgba(242, 237, 227, .35); }
.sol .seta-c svg { stroke: var(--marfim); }
.sol:hover .seta-c { background: var(--terracota); border-color: var(--terracota); }
.sol:hover .seta-c svg { stroke: var(--azul); }
.solucoes li.entra { animation: entraCard .55s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes entraCard { from { opacity: 0; transform: translateY(16px) scale(.98); } }

/* modal: folha que sobe com o prototipo */
.modal { position: fixed; inset: 0; z-index: 80; display: grid; align-items: end; justify-items: center; }
.modal[hidden] { display: none; }
.modal-fundo { position: absolute; inset: 0; background: rgba(8, 18, 27, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .35s; }
.modal-folha {
  position: relative; width: min(1100px, 100%); max-height: 92vh; overflow: auto; background: var(--branco); color: var(--azul);
  border-radius: 18px 18px 0 0; padding: clamp(26px, 4vw, 44px); transform: translateY(100%); transition: transform .5s var(--ease); outline: none;
}
.modal.aberto .modal-fundo { opacity: 1; }
.modal.aberto .modal-folha { transform: none; }
.modal-folha.troca .modal-grade { animation: troca .45s var(--ease); }
@keyframes troca { from { opacity: 0; transform: translateX(14px); } }
.modal-x { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--linha); background: var(--branco); color: var(--azul); cursor: pointer; font-size: 15px; z-index: 2; }
.modal-x:hover { border-color: var(--azul); }
.modal-grade { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 4vw, 48px); align-items: start; }
.modal-topo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.modal-topo .sol-tag { margin: 0; }
.pill { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; letter-spacing: .06em; padding: 5px 11px; border-radius: 999px; background: rgba(47, 107, 58, .1); color: #2f6b3a; }
.pill-pre { background: rgba(198, 111, 78, .12); color: var(--terracota-texto); margin-top: 4px; }
.pill-pre i { background: var(--terracota); }
.pill i { width: 7px; height: 7px; border-radius: 50%; background: #3d8b4a; animation: pulsa 1.8s ease-in-out infinite; }
@keyframes pulsa { 50% { box-shadow: 0 0 0 5px rgba(61, 139, 74, .18); } }
.modal-txt h3 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; margin-bottom: 18px; }
.m-rot { font-size: 10.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--terracota-texto); margin: 18px 0 6px; }
.m-prob { font-size: 15px; color: var(--azul-70); margin: 0; }
.modal-txt .checks { margin: 6px 0 18px; }
.m-tec { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.m-tec li { font-size: 11.5px; font-weight: 500; padding: 5px 10px; border-radius: 999px; background: var(--papel); border: 1px solid var(--linha); }
.modal-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--linha); font-size: 12px; color: var(--azul-70); }
.modal-nav button { background: none; border: 1px solid var(--linha); border-radius: 999px; padding: 9px 16px; cursor: pointer; font: 600 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--azul); }
.modal-nav button:hover { border-color: var(--azul); }

/* maquetes (prototipos ilustrativos: sem marcas, sem valores) */
.mk {
  --T: 9s; --t0: calc(var(--T) * -.5); --de: translateY(6px);
  --mk-sub: rgba(242, 237, 227, .66); --mk-fio: rgba(242, 237, 227, .1); --mk-ok: #8fd19e; --mk-erro: #ff9d8c;
  container-type: inline-size; position: relative; overflow: hidden; border-radius: 14px; color: var(--marfim);
  font: 400 12px/1.35 var(--sans); letter-spacing: 0; text-align: left;
  background: radial-gradient(130% 70% at 100% 0%, rgba(198, 111, 78, .16), transparent 55%), radial-gradient(90% 80% at 0% 100%, rgba(52, 98, 136, .3), transparent 60%), linear-gradient(180deg, #102330, #0b1822);
  border: 1px solid #0a161f;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 34px 60px -30px rgba(16, 37, 54, .7), 0 16px 30px -20px rgba(16, 37, 54, .5);
}
.mk :where(p, h6, ul, li) { margin: 0; padding: 0; list-style: none; }
:where(.mk) :where(b) { font-weight: 600; }
:where(.mk) :where(small) { font-size: 11px; }
:where(.mk) :where(em) { font-style: normal; }
.mk-barra { display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; background: rgba(5, 14, 22, .45); border-bottom: 1px solid rgba(242, 237, 227, .07); font-size: 11.5px; color: rgba(242, 237, 227, .8); }
.mk-barra i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: rgba(242, 237, 227, .16); }
.mk-barra i:first-child { background: var(--terracota); }
.mk-barra span { min-width: 0; margin-left: 8px; padding: 4px 10px; border-radius: 6px; background: rgba(242, 237, 227, .06); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 500; }
.mk-barra em { flex: none; margin-left: auto; font: 500 11px/1 var(--sans); padding: 5px 9px; border-radius: 999px; color: var(--terracota-claro); background: rgba(198, 111, 78, .12); border: 1px solid rgba(216, 132, 102, .3); }
.mk-corpo { position: relative; padding: 14px; overflow: hidden; }
.mk .mk-corpo { display: flex; flex-direction: column; min-height: 336px; }
.mk .mk-corpo > * { flex: 1 1 auto; }

/* pecas comuns */
.mk-i { display: inline-block; width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -2px; }
.mk-cheio { fill: currentColor; stroke: none; }
.mk-card { background: linear-gradient(180deg, rgba(242, 237, 227, .075), rgba(242, 237, 227, .035)); border: 1px solid var(--mk-fio); border-radius: 10px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 14px 28px -18px rgba(0, 0, 0, .75); }
.mk-h { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mk-sub); }
.mk-av { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; font: 600 11px/1 var(--sans); color: #fff; background: linear-gradient(135deg, #e09a7d, #a85a3d); box-shadow: 0 0 0 2px rgba(12, 28, 42, .9); }
.mk-av.mk-a2 { background: linear-gradient(135deg, #85afcf, #294c65); }
.mk-av.mk-a3 { background: linear-gradient(135deg, #dcc59c, #8f7a57); }
.mk-av.mk-a4 { background: linear-gradient(135deg, #9fd3ad, #3d8b4a); }
.mk-av.mk-av-p { width: 19px; height: 19px; }
.mk-tag { display: inline-flex; align-items: center; gap: 4px; flex: none; font: 500 11px/1 var(--sans); padding: 4px 8px; border-radius: 999px; white-space: nowrap; color: rgba(242, 237, 227, .88); background: rgba(242, 237, 227, .07); border: 1px solid rgba(242, 237, 227, .11); }
.mk-tag .mk-i { width: 12px; height: 12px; }
.mk-tag.mk-ok { color: var(--mk-ok); background: rgba(143, 209, 158, .1); border-color: rgba(143, 209, 158, .28); }
.mk-tag.mk-terra { color: var(--terracota-claro); background: rgba(198, 111, 78, .14); border-color: rgba(216, 132, 102, .34); }
.mk-tag.mk-erro { color: var(--mk-erro); background: rgba(255, 120, 100, .1); border-color: rgba(255, 157, 140, .32); }
.mk-sk { display: block; width: 100%; height: 6px; border-radius: 3px; background: rgba(16, 37, 54, .14); }
.mk-pulso { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: mkPulso 1.8s ease-in-out infinite; }
@keyframes mkPulso { 50% { box-shadow: 0 0 0 4px rgba(143, 209, 158, .2); } }
.mk-gira { animation: mkGira 1.6s linear infinite; }
@keyframes mkGira { to { transform: rotate(360deg); } }

/* pilhas: estados que se substituem no mesmo lugar (antes / depois) */
.mk-fo-pilha, .mk-ld-rw, .mk-ld-cx, .mk-ro-st, .mk-ro-band, .mk-ig-pilha, .mk-cr-est, .mk-cr-r, .mk-mt-cf, .mk-gg-est, .mk-gg-v, .mk-rl-est { display: grid; }
.mk-fo-pilha > *, .mk-ld-rw > *, .mk-ld-cx > *, .mk-ro-st > *, .mk-ro-band > *, .mk-ig-pilha > *, .mk-cr-est > *, .mk-cr-r > *, .mk-mt-cf > *, .mk-gg-est > *, .mk-gg-v > *, .mk-rl-est > * { grid-area: 1 / 1; }
.mk-ld-sk i, .mk-cr-sk i, .mk-gg-sk i { background: linear-gradient(90deg, rgba(242, 237, 227, .07) 30%, rgba(242, 237, 227, .2) 50%, rgba(242, 237, 227, .07) 70%) 0 0 / 300% 100%; animation-name: mkBrilho; }
@keyframes mkBrilho { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* roteiro em passos: mk-s1..mk-s9 entram em sequencia e ficam; mk-ate1..mk-ate8 somem quando o passo chega */
.mk-s1, .mk-s2, .mk-s3, .mk-s4, .mk-s5, .mk-s6, .mk-s7, .mk-s8, .mk-s9 { animation: mkS1 var(--T) var(--ease) var(--t0) infinite both; }
.mk-s2 { animation-name: mkS2; } .mk-s3 { animation-name: mkS3; } .mk-s4 { animation-name: mkS4; } .mk-s5 { animation-name: mkS5; }
.mk-s6 { animation-name: mkS6; } .mk-s7 { animation-name: mkS7; } .mk-s8 { animation-name: mkS8; } .mk-s9 { animation-name: mkS9; }
@keyframes mkS1 { 0%, 6% { opacity: 0; transform: var(--de); } 12%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
@keyframes mkS2 { 0%, 14% { opacity: 0; transform: var(--de); } 20%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
@keyframes mkS3 { 0%, 22% { opacity: 0; transform: var(--de); } 28%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
@keyframes mkS4 { 0%, 30% { opacity: 0; transform: var(--de); } 36%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
@keyframes mkS5 { 0%, 38% { opacity: 0; transform: var(--de); } 44%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
@keyframes mkS6 { 0%, 46% { opacity: 0; transform: var(--de); } 52%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
@keyframes mkS7 { 0%, 54% { opacity: 0; transform: var(--de); } 60%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
@keyframes mkS8 { 0%, 62% { opacity: 0; transform: var(--de); } 68%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
@keyframes mkS9 { 0%, 70% { opacity: 0; transform: var(--de); } 76%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
.mk-ate1, .mk-ate2, .mk-ate3, .mk-ate4, .mk-ate5, .mk-ate6, .mk-ate7, .mk-ate8 { opacity: 0; animation: mkAte1 var(--T) linear var(--t0) infinite both; }
.mk-ate2 { animation-name: mkAte2; } .mk-ate3 { animation-name: mkAte3; } .mk-ate4 { animation-name: mkAte4; } .mk-ate5 { animation-name: mkAte5; }
.mk-ate6 { animation-name: mkAte6; } .mk-ate7 { animation-name: mkAte7; } .mk-ate8 { animation-name: mkAte8; }
@keyframes mkAte1 { 0%, 4% { opacity: 1; } 6%, 100% { opacity: 0; } }
@keyframes mkAte2 { 0%, 12% { opacity: 1; } 14%, 100% { opacity: 0; } }
@keyframes mkAte3 { 0%, 20% { opacity: 1; } 22%, 100% { opacity: 0; } }
@keyframes mkAte4 { 0%, 28% { opacity: 1; } 30%, 100% { opacity: 0; } }
@keyframes mkAte5 { 0%, 36% { opacity: 1; } 38%, 100% { opacity: 0; } }
@keyframes mkAte6 { 0%, 44% { opacity: 1; } 46%, 100% { opacity: 0; } }
@keyframes mkAte7 { 0%, 52% { opacity: 1; } 54%, 100% { opacity: 0; } }
@keyframes mkAte8 { 0%, 60% { opacity: 1; } 62%, 100% { opacity: 0; } }

/* 1. formularios */
.mk-fo { display: grid; grid-template-columns: 1fr 28px 1.14fr; align-items: center; gap: 4px; }
.mk-fo-pag { padding: 10px; border-radius: 10px; color: var(--azul); background: linear-gradient(180deg, #fbf8f3, #efe8dc); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 24px 40px -22px rgba(0, 0, 0, .9); }
.mk-fo-url { display: flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 6px; background: rgba(16, 37, 54, .06); font-size: 11px; color: rgba(16, 37, 54, .66); white-space: nowrap; overflow: hidden; }
.mk-fo-url span { overflow: hidden; text-overflow: ellipsis; }
.mk-fo-url .mk-i { width: 11px; height: 11px; color: #3d8b4a; }
.mk-fo-det { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 7px; }
.mk-fo-det .mk-tag { color: #a3543a; background: rgba(198, 111, 78, .1); border-color: rgba(198, 111, 78, .3); }
.mk-fo-campos { display: grid; gap: 6px; }
.mk-fo-campos label { display: block; }
.mk-fo-campos small { display: block; margin-bottom: 3px; color: rgba(16, 37, 54, .66); }
.mk-fo-in { display: flex; align-items: center; justify-content: space-between; height: 27px; padding: 0 8px; border-radius: 6px; background: #fff; border: 1px solid rgba(16, 37, 54, .15); font-size: 12px; }
.mk-fo-in b { display: inline-block; font-weight: 500; white-space: nowrap; }
.mk-fo-in .mk-i { width: 12px; height: 12px; color: rgba(16, 37, 54, .45); }
.mk-fo-1 .mk-fo-in { animation: mkFoco var(--T) var(--t0) infinite both; }
@keyframes mkFoco { 0%, 4%, 24%, 100% { border-color: rgba(16, 37, 54, .15); box-shadow: none; } 7%, 20% { border-color: var(--terracota); box-shadow: 0 0 0 3px rgba(198, 111, 78, .18); } }
.mk-fo-dig { animation: mkDigita var(--T) var(--t0) infinite both; }
@keyframes mkDigita { 0%, 8% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(9, end); } 20%, 96% { clip-path: inset(0 0 0 0); opacity: 1; } 99%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
.mk-fo-bt { display: flex; align-items: center; justify-content: center; gap: 6px; height: 30px; margin-top: 9px; border-radius: 7px; background: var(--azul); color: var(--marfim); font-size: 12px; font-weight: 600; animation: mkClique var(--T) var(--t0) infinite both; }
@keyframes mkClique { 0%, 44%, 52%, 100% { transform: none; box-shadow: none; background: var(--azul); } 46% { transform: scale(.95); background: var(--terracota); box-shadow: 0 0 0 4px rgba(198, 111, 78, .3); } 49% { background: var(--terracota); } }
.mk-fo-fio { position: relative; height: 2px; background: repeating-linear-gradient(90deg, rgba(216, 132, 102, .65) 0 4px, transparent 4px 8px); }
.mk-fo-fio::after { content: ""; position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--terracota-claro); box-shadow: 0 0 10px var(--terracota); opacity: 0; animation: mkFio var(--T) linear var(--t0) infinite; }
@keyframes mkFio { 0%, 47% { left: 0; opacity: 0; } 48% { opacity: 1; } 53% { left: calc(100% - 8px); opacity: 1; } 54%, 100% { left: calc(100% - 8px); opacity: 0; } }
.mk-fo-fio span { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; background: #172f40; border: 1px solid rgba(216, 132, 102, .55); color: var(--terracota-claro); box-shadow: 0 0 0 4px rgba(198, 111, 78, .1); }
.mk-fo-fio .mk-i { width: 12px; height: 12px; }
.mk-fo-crm { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.mk-fo-cab { display: flex; align-items: center; justify-content: space-between; font-size: 12px; }
.mk-fo-cab b { display: inline-flex; align-items: center; gap: 6px; }
.mk-fo-cab .mk-i { color: var(--terracota-claro); }
.mk-fo-novo { --de: translateY(-8px) scale(.97); padding: 9px; border-radius: 10px; background: linear-gradient(180deg, rgba(198, 111, 78, .2), rgba(198, 111, 78, .07)); border: 1px solid rgba(216, 132, 102, .55); box-shadow: 0 0 0 3px rgba(198, 111, 78, .1), 0 16px 30px -18px rgba(198, 111, 78, .7); }
.mk-fo-l1, .mk-fo-velho { display: flex; align-items: center; gap: 8px; }
.mk-fo-l1 > div, .mk-fo-velho > div { flex: 1; min-width: 0; }
.mk-fo-l1 b, .mk-fo-velho b { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-fo-l1 small, .mk-fo-velho small { display: block; color: var(--mk-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-fo-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; }
.mk-fo-dono { display: flex; align-items: center; gap: 6px; padding-top: 7px; border-top: 1px solid rgba(242, 237, 227, .1); font-size: 11px; color: var(--mk-sub); }
.mk-fo-velho { padding: 7px 9px; border-radius: 10px; background: rgba(242, 237, 227, .04); border: 1px solid rgba(242, 237, 227, .07); opacity: .72; }
.mk-fo-esp { display: flex; align-items: center; justify-content: center; gap: 7px; border-radius: 10px; border: 1px dashed rgba(242, 237, 227, .18); background: rgba(242, 237, 227, .025); font-size: 11.5px; color: var(--mk-sub); }
.mk-fo-esp span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(242, 237, 227, .07); }
.mk-fo-esp .mk-i { width: 12px; height: 12px; }
.mk-fo-dup > span { display: flex; align-items: center; gap: 6px; padding: 7px 9px; border-radius: 8px; font-size: 11.5px; }
.mk-fo-dup-p { color: var(--mk-sub); background: rgba(242, 237, 227, .04); border: 1px solid rgba(242, 237, 227, .1); opacity: 0; animation: mkFoDupP var(--T) linear var(--t0) infinite both; }
@keyframes mkFoDupP { 0%, 69% { opacity: 1; } 71%, 100% { opacity: 0; } }
.mk-fo-dup-a { opacity: 0; color: var(--terracota-claro); background: rgba(198, 111, 78, .1); border: 1px dashed rgba(216, 132, 102, .55); animation: mkFoDupA var(--T) var(--ease) var(--t0) infinite both; }
@keyframes mkFoDupA { 0%, 71% { opacity: 0; transform: translateX(12px); } 74%, 79% { opacity: 1; transform: none; } 81%, 100% { opacity: 0; transform: scale(.94); } }
.mk-fo-dup-b { color: var(--mk-ok); background: rgba(143, 209, 158, .08); border: 1px solid rgba(143, 209, 158, .28); animation: mkFoDupB var(--T) var(--ease) var(--t0) infinite both; }
@keyframes mkFoDupB { 0%, 81% { opacity: 0; transform: scale(.94); } 85%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
.mk-fo-av { --de: translateY(8px); display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 9px; background: var(--marfim); color: var(--azul); font-size: 11.5px; box-shadow: 0 14px 26px -14px rgba(0, 0, 0, .9); }
.mk-fo-av > span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(198, 111, 78, .16); color: #a3543a; }
.mk-fo-av .mk-i { width: 12px; height: 12px; }
.mk-fo-av.mk-fo-av0 { background: rgba(242, 237, 227, .05); color: var(--mk-sub); box-shadow: none; border: 1px solid rgba(242, 237, 227, .1); }
.mk-fo-av0 > span { background: rgba(242, 237, 227, .07); color: var(--mk-sub); }

/* 2. distribuidor de leads */
.mk-ld { display: flex; flex-direction: column; }
.mk-ld-link { display: flex; align-items: center; gap: 10px; align-self: center; width: min(100%, 330px); padding: 9px 10px; }
.mk-ld-wa { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 9px; background: #25d366; color: #0b2a17; box-shadow: 0 0 0 4px rgba(37, 211, 102, .14), 0 0 22px -4px rgba(37, 211, 102, .6); }
.mk-ld-wa .mk-i { width: 19px; height: 19px; }
.mk-ld-link > div { flex: 1; min-width: 0; }
.mk-ld-link b { display: block; font-size: 12.5px; }
.mk-ld-link small { display: block; color: var(--mk-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-ld-ponte { --x0: calc((100% - 16px) / 6); position: relative; height: 34px; }
.mk-ld-ponte::before, .mk-ld-ponte::after, .mk-ld-ponte i { content: ""; position: absolute; border: 0 dashed rgba(216, 132, 102, .5); }
.mk-ld-ponte::before { left: var(--x0); right: var(--x0); top: 50%; border-top-width: 1.5px; }
.mk-ld-ponte::after { left: 50%; top: 0; height: 50%; border-left-width: 1.5px; }
.mk-ld-ponte i { top: 50%; height: 50%; border-left-width: 1.5px; left: var(--x0); }
.mk-ld-ponte i:nth-child(2) { left: 50%; }
.mk-ld-ponte i:nth-child(3) { left: calc(100% - var(--x0)); }
.mk-ld-pac { position: absolute; left: 50%; top: 0; z-index: 1; width: 9px; height: 9px; margin: -4px 0 0 -4px; border-radius: 50%; background: #25d366; box-shadow: 0 0 0 3px rgba(37, 211, 102, .22), 0 0 12px rgba(37, 211, 102, .8); opacity: 0; animation: mkLdPac var(--T) linear var(--t0) infinite both; animation-delay: calc(var(--t0) + var(--T) * (.05 + var(--n) * .24)); }
@keyframes mkLdPac { 0% { left: 50%; top: 0; opacity: 0; } 1% { opacity: 1; } 3.5% { left: 50%; top: 50%; } 7% { left: var(--x); top: 50%; } 9% { left: var(--x); top: 100%; opacity: 1; } 10%, 100% { left: var(--x); top: 100%; opacity: 0; } }
.mk-ld-vends { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mk-ld-v { position: relative; min-width: 0; padding: 9px; }
.mk-ld-v::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid #25d366; box-shadow: 0 0 0 3px rgba(37, 211, 102, .14), 0 0 26px -6px rgba(37, 211, 102, .6); opacity: 0; pointer-events: none; animation: mkLdRec var(--T) ease-out var(--t0) infinite both; animation-delay: calc(var(--t0) + var(--T) * (.135 + var(--n) * .24)); }
@keyframes mkLdRec { 0% { opacity: 0; } 2% { opacity: 1; } 14%, 100% { opacity: 0; } }
.mk-ld-vez { position: absolute; top: -9px; right: 8px; z-index: 1; font: 600 11px/1 var(--sans); padding: 4px 7px; border-radius: 999px; background: var(--terracota); color: var(--azul); box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .6); opacity: 0; }
.mk-ld-v:nth-child(1) .mk-ld-vez { opacity: 1; animation: mkVez0 var(--T) var(--t0) infinite both; }
.mk-ld-v:nth-child(2) .mk-ld-vez { animation: mkVez1 var(--T) var(--t0) infinite both; }
.mk-ld-v:nth-child(3) .mk-ld-vez { animation: mkVez2 var(--T) var(--t0) infinite both; }
@keyframes mkVez0 { 0%, 13% { opacity: 1; } 15%, 61% { opacity: 0; } 63%, 100% { opacity: 1; } }
@keyframes mkVez1 { 0%, 13% { opacity: 0; } 15%, 37% { opacity: 1; } 39%, 100% { opacity: 0; } }
@keyframes mkVez2 { 0%, 37% { opacity: 0; } 39%, 61% { opacity: 1; } 63%, 100% { opacity: 0; } }
.mk-ld-vt { display: flex; align-items: center; gap: 7px; }
.mk-ld-vt b { font-size: 12px; }
.mk-ld-vt i { width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: var(--mk-ok); box-shadow: 0 0 0 3px rgba(143, 209, 158, .15); }
.mk-ld-cx { margin-top: 8px; }
.mk-ld-cx > span { min-width: 0; border-radius: 8px 8px 8px 3px; }
.mk-ld-vazio { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 11px; color: var(--mk-sub); border: 1px dashed rgba(242, 237, 227, .16); }
.mk-ld-msg { --de: translateY(-6px) scale(.96); display: block; padding: 7px 8px; background: rgba(37, 211, 102, .1); border: 1px solid rgba(37, 211, 102, .26); }
.mk-ld-msg small { display: flex; align-items: center; gap: 4px; color: #86e2ab; white-space: nowrap; }
.mk-ld-msg small .mk-i { width: 12px; height: 12px; }
.mk-ld-msg b { display: block; margin-top: 3px; font-size: 12px; }
.mk-ld-msg em { display: block; font-size: 11px; color: var(--mk-sub); }
.mk-ld-log { margin-top: 10px; padding: 8px 10px 4px; }
.mk-ld-logc { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.mk-ld-rw { border-top: 1px solid rgba(242, 237, 227, .07); }
.mk-ld-sk { display: flex; align-items: center; gap: 10px; padding: 0 2px; }
.mk-ld-sk i { height: 7px; border-radius: 4px; animation-duration: 1.6s; animation-timing-function: linear; animation-iteration-count: infinite; }
.mk-ld-sk i:nth-child(1) { width: 34px; } .mk-ld-sk i:nth-child(2) { flex: 1; max-width: 120px; } .mk-ld-sk i:nth-child(3) { width: 50px; margin-left: auto; }
.mk-ld-r { --de: translateX(-8px); display: grid; grid-template-columns: auto 1fr auto auto auto; align-items: center; gap: 8px; padding: 5px 0; font-size: 11.5px; }
.mk-ld-r time { color: var(--mk-sub); font-variant-numeric: tabular-nums; }
.mk-ld-r > .mk-i { width: 12px; height: 12px; color: var(--mk-sub); }

/* 3. rotinas */
.mk-ro { display: grid; grid-template-columns: 1.62fr 1fr; grid-template-rows: 1fr auto; gap: 10px; }
.mk-ro-agenda { padding: 10px; min-width: 0; }
.mk-ro-cab { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 9px; font-size: 12px; }
.mk-ro-cab b { display: inline-flex; align-items: center; gap: 6px; }
.mk-ro-cab .mk-i { color: var(--terracota-claro); }
.mk-ro-trilho { position: relative; display: grid; gap: 6px; }
.mk-ro-trilho::before { content: ""; position: absolute; left: 44px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: rgba(242, 237, 227, .1); }
.mk-ro-prog { position: absolute; left: 44px; top: 8px; z-index: 1; width: 2px; height: 142px; border-radius: 2px; background: linear-gradient(180deg, var(--mk-ok), var(--terracota-claro)); animation: mkRoProg var(--T) linear var(--t0) infinite both; }
.mk-ro-prog::after { content: ""; position: absolute; left: -3px; bottom: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--terracota-claro); box-shadow: 0 0 0 4px rgba(198, 111, 78, .25), 0 0 12px var(--terracota); }
@keyframes mkRoProg { 0% { height: 0; } 7% { height: 16px; } 15% { height: 68px; } 22%, 46% { height: 120px; } 55%, 100% { height: 142px; } }
.mk-ro-job { display: grid; grid-template-columns: 33px 12px minmax(0, 1fr); align-items: center; gap: 6px; height: 46px; }
.mk-ro-job time { font-size: 11px; color: var(--mk-sub); text-align: right; font-variant-numeric: tabular-nums; }
.mk-ro-no { position: relative; z-index: 2; width: 12px; height: 12px; border-radius: 50%; background: #102330; border: 2px solid rgba(242, 237, 227, .3); }
.mk-ro-job:nth-child(-n+4) .mk-ro-no { border-color: var(--mk-ok); }
.mk-ro-jc { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 100%; padding: 0 9px; border-radius: 9px; background: rgba(242, 237, 227, .05); border: 1px solid rgba(242, 237, 227, .08); min-width: 0; }
.mk-ro-jc > div { min-width: 0; }
.mk-ro-jc b { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-ro-jc small { display: block; color: var(--mk-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-ro-j3 .mk-ro-jc { animation: mkRoFalha var(--T) var(--t0) infinite both; }
@keyframes mkRoFalha { 0%, 29%, 47%, 100% { border-color: rgba(242, 237, 227, .08); background: rgba(242, 237, 227, .05); } 31%, 45% { border-color: rgba(255, 157, 140, .55); background: rgba(255, 120, 100, .1); } }
.mk-ro-j4 { opacity: .7; }
.mk-ro-st { justify-items: end; flex: none; }
.mk-ro-rod { opacity: 0; animation: mkRoRod var(--T) var(--t0) infinite both; }
@keyframes mkRoRod { 0%, 22% { opacity: 0; } 24%, 28% { opacity: 1; } 30%, 100% { opacity: 0; } }
.mk-ro-fal { opacity: 0; animation: mkRoFal var(--T) var(--t0) infinite both; }
@keyframes mkRoFal { 0%, 30% { opacity: 0; } 32%, 44% { opacity: 1; } 46%, 100% { opacity: 0; } }
.mk-ro-log { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 10px; border-radius: 10px; background: rgba(4, 12, 19, .6); border: 1px solid rgba(242, 237, 227, .08); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); font: 400 11px/1.45 ui-monospace, "Cascadia Mono", Consolas, monospace; }
.mk-ro-logc { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font: 600 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--mk-sub); }
.mk-ro-log code { display: block; font: inherit; color: rgba(242, 237, 227, .86); }
.mk-ro-log time { margin-right: 6px; color: rgba(242, 237, 227, .55); }
.mk-ro-log b { font-weight: 400; }
.mk-ro-log .mk-ro-velho { opacity: .5; }
.mk-ro-v { color: var(--mk-ok); }
.mk-ro-e { color: var(--mk-erro); }
.mk-ro-t { color: var(--terracota-claro); }
.mk-ro-cur i { display: inline-block; width: 7px; height: 12px; margin-left: 4px; vertical-align: -2px; background: var(--mk-ok); animation: mkCursor 1s steps(1) infinite; }
@keyframes mkCursor { 50% { opacity: 0; } }
.mk-ro-band { grid-column: 1 / -1; }
.mk-ro-mon { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: linear-gradient(90deg, rgba(143, 209, 158, .1), rgba(143, 209, 158, .02)); border: 1px solid rgba(143, 209, 158, .25); }
.mk-ro-mon .mk-ro-ai { background: rgba(143, 209, 158, .14); color: var(--mk-ok); }
.mk-ro-mon b { display: block; font-size: 12px; }
.mk-ro-mon small { display: block; color: var(--mk-sub); }
.mk-ro-alerta { --de: translateY(10px); display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: linear-gradient(90deg, rgba(255, 120, 100, .16), rgba(255, 120, 100, .04)); border: 1px solid rgba(255, 157, 140, .35); }
.mk-ro-ai { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 120, 100, .18); color: var(--mk-erro); }
.mk-ro-alerta > div { flex: 1; min-width: 0; }
.mk-ro-alerta b { display: block; font-size: 12px; }
.mk-ro-alerta small { display: block; color: var(--mk-sub); }

/* 4. instagram */
.mk-ig { display: grid; grid-template-columns: .92fr 1.08fr; grid-template-rows: 1fr auto; gap: 10px; }
.mk-ig-post { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.mk-ig-pc { display: flex; align-items: center; gap: 7px; padding: 7px 9px; font-size: 12px; }
.mk-ig-anel { display: inline-grid; padding: 2px; border-radius: 50%; background: conic-gradient(from 200deg, #e6a487, #c66f4e, #f2ede3, #e6a487); }
.mk-ig-anel .mk-av { width: 22px; height: 22px; box-shadow: 0 0 0 2px #132b3b; }
.mk-ig-pc small { margin-left: auto; color: var(--mk-sub); }
.mk-ig-img { position: relative; flex: 1; min-height: 92px; display: flex; flex-direction: column; justify-content: flex-end; padding: 10px; overflow: hidden; background: radial-gradient(circle at 78% 30%, #e6a487 0 15%, rgba(230, 164, 135, .25) 16%, transparent 30%), radial-gradient(120% 90% at 0% 100%, rgba(198, 111, 78, .9), transparent 62%), linear-gradient(160deg, #25465d, #102536 72%); }
.mk-ig-img b { font: 400 17px/1.05 var(--serif); letter-spacing: .02em; color: #fff; }
.mk-ig-img small { margin-top: 3px; color: rgba(255, 255, 255, .85); }
.mk-ig-ac { display: flex; gap: 10px; padding: 7px 9px 3px; }
.mk-ig-ac .mk-i { width: 16px; height: 16px; }
.mk-ig-ac .mk-i:first-child { color: var(--terracota-claro); fill: currentColor; }
.mk-ig-coms { display: grid; gap: 5px; padding: 4px 9px 9px; font-size: 11.5px; }
.mk-ig-coms p { display: block; }
.mk-ig-coms b { margin-right: 5px; }
.mk-ig-coms time { margin-left: 5px; font-size: 11px; color: var(--mk-sub); }
.mk-ig-resp { padding-left: 9px; border-left: 2px solid rgba(216, 132, 102, .55); color: rgba(242, 237, 227, .8); }
.mk-ig-resp .mk-i { width: 12px; height: 12px; color: var(--mk-ok); }
.mk-ig-chat { display: flex; flex-direction: column; min-width: 0; }
.mk-ig-cc { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid rgba(242, 237, 227, .08); }
.mk-ig-cc > div { flex: 1; min-width: 0; }
.mk-ig-cc b { display: block; font-size: 12px; }
.mk-ig-cc small { display: flex; align-items: center; gap: 4px; color: var(--mk-sub); white-space: nowrap; }
.mk-ig-cc small .mk-i { width: 11px; height: 11px; color: var(--terracota-claro); }
.mk-ig-bot { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: rgba(198, 111, 78, .2); color: var(--terracota-claro); box-shadow: 0 0 0 3px rgba(198, 111, 78, .1); }
.mk-ig-bot .mk-i { width: 12px; height: 12px; }
.mk-ig-msgs { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 10px; }
.mk-ig-msgs > * { flex: none; }
.mk-ig-ctx { display: none; align-self: flex-start; align-items: center; gap: 6px; margin-bottom: auto; padding: 5px 9px; border-radius: 999px; background: rgba(4, 12, 19, .4); border: 1px solid rgba(242, 237, 227, .1); }
.mk-ig-ctx small { display: inline-flex; align-items: center; gap: 5px; color: var(--mk-sub); }
.mk-ig-ctx small .mk-i { width: 12px; height: 12px; color: var(--terracota-claro); }
.mk-ig-ctx b { font-weight: 500; color: var(--marfim); }
.mk-ig-pilha { justify-items: end; align-items: end; }
.mk-ig-eu { --de: translateY(6px) scale(.96); max-width: 90%; padding: 8px 11px; border-radius: 14px 14px 4px 14px; background: linear-gradient(135deg, #d88466, #b65f3f); color: #fff; font-size: 12px; box-shadow: 0 10px 20px -12px rgba(198, 111, 78, .9); }
.mk-ig-dig { display: inline-flex; gap: 3px; padding: 9px 11px; border-radius: 14px 14px 4px 14px; background: rgba(198, 111, 78, .3); opacity: 0; animation: mkIgDig var(--T) var(--t0) infinite both; }
.mk-ig-dig i { width: 5px; height: 5px; border-radius: 50%; background: #fff; animation: mkPonto 1s ease-in-out infinite; }
.mk-ig-dig i:nth-child(2) { animation-delay: .15s; } .mk-ig-dig i:nth-child(3) { animation-delay: .3s; }
@keyframes mkIgDig { 0%, 12% { opacity: 0; } 14%, 20% { opacity: 1; } 22%, 100% { opacity: 0; } }
@keyframes mkPonto { 50% { transform: translateY(-3px); opacity: .5; } }
.mk-ig-prev { align-self: flex-end; display: flex; align-items: center; gap: 8px; width: 90%; padding: 6px 8px 6px 6px; border-radius: 12px; background: rgba(242, 237, 227, .08); border: 1px solid rgba(242, 237, 227, .12); }
.mk-ig-th { flex: none; width: 34px; height: 34px; border-radius: 7px; background: radial-gradient(circle at 72% 30%, #e6a487 0 20%, transparent 22%), linear-gradient(160deg, #25465d, #102536); }
.mk-ig-prev > div { flex: 1; min-width: 0; }
.mk-ig-prev b { display: block; font-size: 11.5px; }
.mk-ig-prev small { display: block; color: var(--mk-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-ig-prev > .mk-i { color: var(--terracota-claro); }
.mk-ig-meta { align-self: flex-end; display: inline-flex; align-items: center; gap: 4px; color: var(--mk-sub); }
.mk-ig-meta .mk-i { width: 12px; height: 12px; color: var(--mk-ok); }
.mk-ig-ele { align-self: flex-start; max-width: 85%; padding: 8px 11px; border-radius: 14px 14px 14px 4px; background: rgba(242, 237, 227, .11); font-size: 12px; }
.mk-ig-painel { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 7px 8px; padding: 8px 10px; }
.mk-ig-pt { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.mk-ig-pt small { color: var(--mk-sub); }
.mk-ig-linha { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 8px; border-radius: 8px; background: rgba(242, 237, 227, .045); border: 1px solid rgba(242, 237, 227, .07); }
.mk-ig-mini { flex: none; width: 26px; height: 26px; border-radius: 6px; background: radial-gradient(circle at 72% 30%, #e6a487 0 20%, transparent 22%), linear-gradient(160deg, #25465d, #102536); }
.mk-ig-mini.mk-m2 { background: linear-gradient(160deg, #a58c63, #3b3126); }
.mk-ig-linha > div { flex: 1; min-width: 0; }
.mk-ig-linha b { display: block; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-ig-linha small { display: flex; align-items: center; gap: 4px; color: var(--mk-ok); white-space: nowrap; overflow: hidden; }
.mk-ig-linha small .mk-i { width: 11px; height: 11px; }
.mk-ig-ch { position: relative; flex: none; width: 30px; height: 17px; border-radius: 999px; background: rgba(242, 237, 227, .2); }
.mk-ig-ch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
.mk-ig-ch.mk-liga { background: #3d8b4a; box-shadow: 0 0 10px -2px rgba(143, 209, 158, .6); }
.mk-ig-ch.mk-liga::after { left: 15px; }
.mk-ig-bloq small { color: var(--terracota-claro); }
.mk-ig-bloq .mk-ig-ch { opacity: .55; animation: mkNega var(--T) var(--t0) infinite both; }
@keyframes mkNega { 0%, 70%, 80%, 100% { transform: none; } 72%, 76% { transform: translateX(-3px); } 74%, 78% { transform: translateX(3px); } }

/* 5. criativos */
.mk-cr { display: flex; flex-direction: column; gap: 10px; }
.mk-cr-video { padding: 10px; }
.mk-cr-vc { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; font-size: 12px; }
.mk-cr-vc > span:first-child { display: inline-flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.mk-cr-vc > span:first-child .mk-i { color: var(--terracota-claro); }
.mk-cr-quadros { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.mk-cr-quadros > span { position: relative; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); background: radial-gradient(circle at 50% 40%, #e3b9a1 0 13%, transparent 14%), radial-gradient(50% 34% at 50% 100%, #c66f4e 0 96%, transparent 100%), linear-gradient(170deg, #3a6789, #122533); }
.mk-cr-quadros .mk-cr-q1 { background: radial-gradient(circle at 42% 34%, #e3b9a1 0 19%, transparent 20%), radial-gradient(64% 40% at 42% 100%, #3d6f93 0 96%, transparent 100%), linear-gradient(170deg, #cdb48c, #8f7a57); }
.mk-cr-quadros .mk-cr-q2 { background: radial-gradient(28% 34% at 50% 58%, #f2ede3 0 94%, transparent 100%), radial-gradient(40% 12% at 50% 92%, rgba(0, 0, 0, .35) 0 90%, transparent 100%), linear-gradient(170deg, #c66f4e, #7e3f28); }
.mk-cr-quadros .mk-cr-q3 { background: linear-gradient(#f2ede3, #f2ede3) 50% 38% / 62% 9% no-repeat, linear-gradient(rgba(242, 237, 227, .6), rgba(242, 237, 227, .6)) 50% 56% / 44% 7% no-repeat, linear-gradient(170deg, #1c394e, #102536); }
.mk-cr-quadros .mk-cr-q4 { background: radial-gradient(circle at 62% 40%, #e3b9a1 0 13%, transparent 14%), radial-gradient(48% 32% at 62% 100%, #f2ede3 0 96%, transparent 100%), linear-gradient(170deg, #496f5a, #1b3328); }
.mk-cr-quadros .mk-cr-q5 { background: linear-gradient(var(--terracota), var(--terracota)) 50% 62% / 58% 18% no-repeat, linear-gradient(#f2ede3, #f2ede3) 50% 34% / 50% 8% no-repeat, linear-gradient(170deg, #102536, #09141b); }
.mk-cr-quadros > span i { position: absolute; inset: 16% 20% 18%; border: 1.5px dashed var(--terracota-claro); border-radius: 4px; animation: mkCrMarca var(--T) var(--ease) var(--t0) infinite both; animation-delay: calc(var(--t0) + var(--T) * var(--i) * .075); }
.mk-cr-quadros > span i::after { content: ""; position: absolute; top: -5px; right: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--mk-ok); box-shadow: 0 0 0 2px #102330; }
@keyframes mkCrMarca { 0%, 3% { opacity: 0; transform: scale(1.2); } 6%, 94% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
.mk-cr-scan { position: absolute; top: -4px; bottom: -4px; left: 0; width: 2px; border-radius: 2px; background: var(--terracota-claro); box-shadow: 0 0 12px 2px rgba(198, 111, 78, .8); opacity: 0; animation: mkCrScan var(--T) linear var(--t0) infinite both; }
.mk-cr-scan::before { content: ""; position: absolute; top: 0; bottom: 0; right: 2px; width: 46px; background: linear-gradient(90deg, transparent, rgba(216, 132, 102, .22)); }
@keyframes mkCrScan { 0% { left: 0; opacity: 0; } 2% { opacity: 1; } 45% { left: 100%; opacity: 1; } 47%, 100% { left: 100%; opacity: 0; } }
.mk-cr-fala { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.mk-cr-fala > .mk-i { color: var(--terracota-claro); }
.mk-cr-onda { display: flex; align-items: center; gap: 2px; flex: 0 0 30%; height: 22px; }
.mk-cr-onda span { flex: 1; height: var(--h); border-radius: 2px; background: rgba(242, 237, 227, .45); animation: mkOnda 1.1s ease-in-out infinite; animation-delay: calc(var(--i) * -.09s); }
@keyframes mkOnda { 50% { transform: scaleY(.45); background: var(--terracota-claro); } }
.mk-cr-fala p { flex: 1; min-width: 0; font-size: 11.5px; font-style: italic; color: rgba(242, 237, 227, .86); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-cr-fala mark { color: var(--marfim); background: rgba(198, 111, 78, .32); border-radius: 3px; padding: 0 2px; }
.mk-cr-ia { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-color: rgba(216, 132, 102, .26); background: linear-gradient(180deg, rgba(198, 111, 78, .1), rgba(242, 237, 227, .03)); }
.mk-cr-iac { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.mk-cr-iac .mk-i { color: var(--terracota-claro); }
.mk-cr-iac small { margin-left: auto; color: var(--mk-sub); }
.mk-cr-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mk-cr-it { min-width: 0; padding: 7px 8px; border-radius: 8px; background: rgba(12, 28, 42, .55); border: 1px solid rgba(242, 237, 227, .08); }
.mk-cr-it > small { display: block; margin-bottom: 5px; color: var(--mk-sub); }
.mk-cr-r { align-items: center; min-height: 23px; }
.mk-cr-sk { display: grid; gap: 5px; align-content: center; }
.mk-cr-sk i { height: 7px; border-radius: 4px; animation-duration: 1.6s; animation-timing-function: linear; animation-iteration-count: infinite; }
.mk-cr-sk i:nth-child(2) { width: 62%; }
.mk-cr-est { justify-items: end; }
.mk-cr-it p { font-size: 11.5px; line-height: 1.35; }
.mk-cr-seg { display: flex; padding: 2px; border-radius: 7px; background: rgba(4, 12, 19, .55); }
.mk-cr-seg span { flex: 1; padding: 3px 0; border-radius: 5px; text-align: center; font-size: 11px; color: var(--mk-sub); }
.mk-cr-seg .mk-on { background: var(--terracota); color: var(--azul); font-weight: 600; }
.mk-cr-ch { display: flex; flex-wrap: wrap; gap: 4px; }
.mk-cr-it code { display: block; font: 11px/1.4 ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--mk-ok); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-cr-rev { display: flex; align-items: center; gap: 6px; margin-top: auto; }
.mk-cr-rev .mk-cr-est { margin-right: auto; justify-items: start; }
.mk-cr-bt { padding: 5px 10px; border-radius: 6px; border: 1px solid rgba(242, 237, 227, .22); font-size: 11px; font-weight: 600; }
.mk-cr-bt.mk-pri { background: var(--marfim); border-color: var(--marfim); color: var(--azul); }

/* 6. esteira de conteudo */
.mk-ct { display: flex; flex-direction: column; gap: 10px; }
.mk-ct-quadro { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.mk-ct-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 6px; border-radius: 10px; background: rgba(242, 237, 227, .04); border: 1px solid rgba(242, 237, 227, .07); }
.mk-ct-ch { display: flex; align-items: center; gap: 5px; height: 20px; padding: 0 2px; font-size: 11px; color: rgba(242, 237, 227, .85); white-space: nowrap; overflow: hidden; }
.mk-ct-ch .mk-i { width: 12px; height: 12px; color: var(--terracota-claro); }
.mk-ct-vaga { height: 76px; border-radius: 8px; border: 1px dashed rgba(242, 237, 227, .14); }
.mk-ct-c { padding: 7px; border-radius: 8px; background: rgba(242, 237, 227, .06); border: 1px solid rgba(242, 237, 227, .08); }
.mk-ct-c b { display: block; font-size: 11px; font-weight: 500; line-height: 1.3; }
.mk-ct-c small { display: flex; align-items: center; gap: 4px; margin-top: 4px; color: var(--mk-sub); }
.mk-ct-c small .mk-i { width: 11px; height: 11px; }
.mk-ct-viaja { position: absolute; left: 0; top: 32px; z-index: 2; width: calc((100% - 24px) / 4); padding: 0 6px; transform: translateX(calc(300% + 24px)); animation: mkCtX var(--T) var(--ease) var(--t0) infinite both; }
@keyframes mkCtX {
  0% { opacity: 0; transform: translateY(-6px); } 4%, 18% { opacity: 1; transform: none; }
  24%, 43% { transform: translateX(calc(100% + 8px)); } 49%, 68% { transform: translateX(calc(200% + 16px)); }
  74%, 94% { opacity: 1; transform: translateX(calc(300% + 24px)); } 98%, 100% { opacity: 0; transform: translateX(calc(300% + 24px)); }
}
.mk-ct-card { display: flex; flex-direction: column; justify-content: space-between; height: 76px; padding: 8px; border-radius: 8px; background: linear-gradient(180deg, #1d3648, #152b3b); border: 1px solid rgba(216, 132, 102, .65); box-shadow: 0 0 0 3px rgba(198, 111, 78, .14), 0 18px 28px -14px rgba(0, 0, 0, .9); }
.mk-ct-card > b { font-size: 11.5px; line-height: 1.25; }
.mk-ct-pass { display: flex; gap: 4px; }
.mk-ct-pass span { position: relative; display: grid; place-items: center; width: 19px; height: 19px; border-radius: 5px; background: rgba(242, 237, 227, .08); color: rgba(242, 237, 227, .4); }
.mk-ct-pass .mk-i { width: 11px; height: 11px; }
.mk-ct-pass em { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 5px; background: rgba(143, 209, 158, .2); color: var(--mk-ok); box-shadow: inset 0 0 0 1px rgba(143, 209, 158, .4); }
.mk-ct-barra { display: block; height: 3px; border-radius: 3px; background: rgba(242, 237, 227, .1); overflow: hidden; }
.mk-ct-barra i { display: block; width: 100%; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--mk-ok), var(--terracota-claro)); animation: mkCtBarra var(--T) var(--ease) var(--t0) infinite both; }
@keyframes mkCtBarra { 0%, 4% { width: 6%; } 12% { width: 25%; } 28% { width: 45%; } 52% { width: 70%; } 76%, 100% { width: 100%; } }
.mk-ct-det { padding: 10px; }
.mk-ct-dc { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; font-size: 12px; }
.mk-ct-dc b { display: inline-flex; align-items: center; gap: 6px; }
.mk-ct-dc b .mk-i { color: var(--terracota-claro); }
.mk-ct-det p { font-size: 11.5px; line-height: 1.55; color: rgba(242, 237, 227, .8); }
.mk-ct-det mark { color: var(--marfim); background: rgba(198, 111, 78, .3); border-bottom: 1.5px dashed var(--terracota-claro); border-radius: 2px; padding: 0 2px; animation: mkCtMarca var(--T) var(--t0) infinite both; }
@keyframes mkCtMarca { 0%, 30% { background: transparent; border-bottom-color: transparent; } 35%, 94% { background: rgba(198, 111, 78, .3); border-bottom-color: var(--terracota-claro); } 100% { background: transparent; border-bottom-color: transparent; } }
.mk-ct-marcas { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 8px; }
.mk-ct-tempo { display: flex; align-items: center; gap: 8px; margin-top: 8px; font: 11px/1 var(--sans); color: var(--mk-sub); font-variant-numeric: tabular-nums; }
.mk-ct-tempo i { position: relative; flex: 1; height: 4px; border-radius: 4px; background: rgba(242, 237, 227, .12); }
.mk-ct-tempo b { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: 4px; background: rgba(242, 237, 227, .35); transform-origin: left; animation: mkCtTempo var(--T) linear var(--t0) infinite both; }
@keyframes mkCtTempo { 0%, 8% { transform: scaleX(0); } 40%, 100% { transform: none; } }
.mk-ct-tempo em { position: absolute; left: 39%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--terracota-claro); box-shadow: 0 0 0 3px rgba(198, 111, 78, .3), 0 0 10px var(--terracota); }
.mk-ct-pub { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding: 5px 9px; border-radius: 6px; background: var(--marfim); color: var(--azul); font-size: 11px; font-weight: 600; animation: mkCtPub var(--T) var(--t0) infinite both; }
@keyframes mkCtPub { 0%, 72%, 96%, 100% { box-shadow: 0 0 0 0 rgba(242, 237, 227, 0); } 78%, 90% { box-shadow: 0 0 0 4px rgba(242, 237, 227, .22); } }

/* 7. campanhas meta */
.mk-mt { display: flex; flex-direction: column; gap: 10px; }
.mk-mt-bar { display: flex; align-items: center; gap: 10px; }
.mk-mt-bar > b { font-size: 13px; }
.mk-mt-abas { display: flex; gap: 2px; padding: 2px; border-radius: 7px; background: rgba(4, 12, 19, .5); }
.mk-mt-abas span { padding: 4px 8px; border-radius: 5px; font-size: 11px; color: var(--mk-sub); }
.mk-mt-abas .mk-on { background: rgba(242, 237, 227, .12); color: var(--marfim); }
.mk-mt-novo { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding: 6px 10px; border-radius: 7px; background: var(--terracota); color: var(--azul); font-size: 11px; font-weight: 600; white-space: nowrap; }
.mk-mt-novo .mk-i { width: 12px; height: 12px; }
.mk-mt-tab { position: relative; overflow: hidden; }
.mk-mt-th, .mk-mt-tr { display: grid; grid-template-columns: 28px minmax(0, 1fr) 70px 34px 34px 34px; align-items: center; gap: 6px; padding: 0 10px; }
.mk-mt-th { height: 28px; font-size: 11px; color: var(--mk-sub); background: rgba(4, 12, 19, .35); border-bottom: 1px solid rgba(242, 237, 227, .07); }
.mk-mt-th span:nth-child(n+4) { text-align: center; }
.mk-mt-th .mk-i { width: 13px; height: 13px; }
.mk-mt-tr { height: 36px; border-bottom: 1px solid rgba(242, 237, 227, .06); font-size: 11.5px; }
.mk-mt-tr b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-mt-tr .mk-tag { justify-self: start; }
.mk-mt-ch { position: relative; width: 26px; height: 15px; border-radius: 999px; background: rgba(242, 237, 227, .16); }
.mk-mt-ch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: rgba(242, 237, 227, .7); }
.mk-mt-ok, .mk-mt-pend { justify-self: center; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(143, 209, 158, .14); color: var(--mk-ok); }
.mk-mt-ok .mk-i, .mk-mt-pend .mk-i { width: 12px; height: 12px; }
.mk-mt-cf { justify-items: center; }
.mk-mt-pend { background: transparent; border: 1.5px dashed rgba(242, 237, 227, .25); }
.mk-mt-scan { position: absolute; left: 0; right: 0; top: 28px; height: 36px; background: linear-gradient(90deg, rgba(143, 209, 158, .02), rgba(143, 209, 158, .12)); box-shadow: inset 2px 0 0 var(--mk-ok); opacity: 0; pointer-events: none; animation: mkMtScan var(--T) steps(1) var(--t0) infinite both; }
@keyframes mkMtScan { 0%, 7% { opacity: 0; top: 28px; } 8% { opacity: 1; top: 28px; } 16% { top: 64px; } 24% { top: 100px; } 32% { top: 136px; } 40%, 100% { opacity: 0; top: 136px; } }
.mk-mt-selo { position: absolute; right: 128px; bottom: 6px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 2px solid var(--mk-ok); border-radius: 8px; background: rgba(12, 28, 42, .9); color: var(--mk-ok); font: 600 12px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; transform: rotate(-7deg); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .8); animation: mkSelo var(--T) var(--ease) var(--t0) infinite both; }
@keyframes mkSelo { 0%, 44% { opacity: 0; transform: rotate(-7deg) scale(1.6); } 49%, 93% { opacity: 1; transform: rotate(-7deg) scale(1); } 98%, 100% { opacity: 0; transform: rotate(-7deg) scale(1); } }
.mk-mt-base { display: grid; grid-template-columns: 1.1fr 1fr; gap: 10px; }
.mk-mt-proj, .mk-mt-status { display: flex; flex-direction: column; min-width: 0; padding: 9px 10px; }
.mk-mt-pc { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.mk-mt-pc small { color: var(--mk-sub); }
.mk-mt-proj > svg { display: block; width: 100%; height: auto; margin: 8px 0 6px; overflow: visible; }
.mk-mt-teto { stroke: rgba(255, 157, 140, .6); stroke-width: 1.2; stroke-dasharray: 3 3; }
.mk-mt-area { fill: rgba(216, 132, 102, .16); }
.mk-mt-real { fill: none; stroke: var(--terracota-claro); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 100; animation: mkTraco var(--T) var(--ease) var(--t0) infinite both; }
.mk-mt-prev { fill: none; stroke: rgba(242, 237, 227, .55); stroke-width: 1.8; stroke-dasharray: 4 4; }
.mk-mt-hoje { fill: var(--terracota-claro); stroke: #102330; stroke-width: 2; }
@keyframes mkTraco { 0%, 4% { stroke-dashoffset: 100; } 30%, 100% { stroke-dashoffset: 0; } }
.mk-mt-leg { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; color: var(--mk-sub); }
.mk-mt-leg span { display: inline-flex; align-items: center; gap: 5px; }
.mk-mt-leg i { width: 12px; height: 0; border-top: 2px solid var(--terracota-claro); }
.mk-mt-leg .mk-mt-lp { border-top: 2px dashed rgba(242, 237, 227, .6); }
.mk-mt-leg .mk-mt-lt { border-top: 2px dashed rgba(255, 157, 140, .7); }
.mk-mt-sc { display: flex; align-items: center; gap: 8px; padding-bottom: 7px; margin-bottom: 6px; border-bottom: 1px solid rgba(242, 237, 227, .08); }
.mk-mt-sc > span { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 8px; background: rgba(198, 111, 78, .18); color: var(--terracota-claro); }
.mk-mt-sc b { display: block; font-size: 12px; }
.mk-mt-sc small { display: block; color: var(--mk-sub); }
.mk-mt-status ul { display: grid; gap: 4px; }
.mk-mt-status li { display: flex; align-items: center; gap: 6px; font-size: 11.5px; }
.mk-mt-status li .mk-i { width: 12px; height: 12px; color: var(--mk-ok); }

/* 8. google via api */
.mk-gg { display: grid; grid-template-columns: 1.05fr 30px 1.15fr; align-items: stretch; gap: 4px; }
.mk-gg-sheet { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: 10px; color: var(--azul); background: #fbf8f3; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 24px 40px -22px rgba(0, 0, 0, .9); }
.mk-gg-sc { display: flex; align-items: center; gap: 6px; padding: 7px 9px; font-size: 11.5px; background: #e9e1d3; border-bottom: 1px solid rgba(16, 37, 54, .1); }
.mk-gg-sc .mk-i { color: #3d8b4a; }
.mk-gg-grid { position: relative; flex: 1; align-content: start; display: grid; grid-template-columns: 20px .8fr 1.3fr .7fr; font-size: 11px; }
.mk-gg-grid > span { display: flex; align-items: center; min-width: 0; height: 25px; padding: 0 5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border-right: 1px solid rgba(16, 37, 54, .09); border-bottom: 1px solid rgba(16, 37, 54, .09); }
.mk-gg-grid > span:nth-child(4n) { border-right: 0; }
.mk-gg-grid .mk-gg-hd { background: #f1ebe0; font-weight: 600; color: rgba(16, 37, 54, .75); }
.mk-gg-grid .mk-gg-n { position: relative; justify-content: center; padding: 0; background: #f1ebe0; color: rgba(16, 37, 54, .55); }
.mk-gg-n i { position: absolute; inset: 0; display: grid; place-items: center; background: #3d8b4a; color: #fff; animation: mkGgLido var(--T) var(--t0) infinite both; animation-delay: calc(var(--t0) + var(--T) * (.06 + var(--i) * .07)); }
.mk-gg-n i .mk-i { width: 11px; height: 11px; stroke-width: 2.6; }
@keyframes mkGgLido { 0% { opacity: 0; } 2%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }
.mk-gg-lin { position: absolute; left: 0; right: 0; top: 25px; height: 25px; background: rgba(198, 111, 78, .16); box-shadow: inset 0 0 0 1.5px rgba(198, 111, 78, .6); opacity: 0; animation: mkGgLin var(--T) steps(1) var(--t0) infinite both; }
@keyframes mkGgLin { 0%, 5% { opacity: 0; top: 25px; } 6% { opacity: 1; top: 25px; } 13% { top: 50px; } 20% { top: 75px; } 27% { top: 100px; } 34% { top: 125px; } 41% { top: 150px; } 48%, 100% { opacity: 0; top: 150px; } }
.mk-gg-ponte { position: relative; align-self: center; height: 2px; background: repeating-linear-gradient(90deg, rgba(216, 132, 102, .6) 0 4px, transparent 4px 8px); }
.mk-gg-ponte i { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--terracota-claro); box-shadow: 0 0 10px var(--terracota); animation: mkGgFlui 1.4s linear infinite; }
.mk-gg-ponte i:nth-child(2) { animation-delay: -.7s; }
@keyframes mkGgFlui { from { left: 0; opacity: 0; } 15%, 85% { opacity: 1; } to { left: calc(100% - 8px); opacity: 0; } }
.mk-gg-ponte span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 4px 5px; border-radius: 6px; background: #172f40; border: 1px solid rgba(216, 132, 102, .55); color: var(--terracota-claro); font: 600 11px/1 var(--sans); }
.mk-gg-arv { display: flex; flex-direction: column; gap: 7px; min-width: 0; padding: 10px; }
.mk-gg-raiz { display: flex; align-items: center; gap: 7px; padding-bottom: 7px; border-bottom: 1px solid rgba(242, 237, 227, .08); font-size: 12px; }
.mk-gg-raiz > span:first-child { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 7px; background: rgba(198, 111, 78, .2); color: var(--terracota-claro); }
.mk-gg-raiz > div { flex: 1; min-width: 0; }
.mk-gg-raiz b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-gg-raiz small { display: inline-flex; align-items: center; gap: 4px; color: var(--mk-sub); }
.mk-gg-raiz small .mk-i { width: 11px; height: 11px; }
.mk-gg-raiz .mk-gg-ok { color: var(--mk-ok); }
.mk-gg-g > b { display: flex; align-items: center; gap: 6px; font-size: 11.5px; }
.mk-gg-g > b .mk-i { width: 13px; height: 13px; color: var(--terracota-claro); }
.mk-gg-g ul { display: grid; gap: 4px; margin: 4px 0 0 6px; padding-left: 12px; border-left: 1px solid rgba(242, 237, 227, .16); }
.mk-gg-g li { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 11px; }
.mk-gg-g li::before { content: ""; position: absolute; left: -12px; top: 11px; width: 8px; border-top: 1px solid rgba(242, 237, 227, .16); }
.mk-gg-g li small { min-width: 86px; color: var(--mk-sub); }
.mk-gg-v { align-items: center; min-width: 0; }
.mk-gg-v > span { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.mk-gg-sk { display: flex; align-items: center; }
.mk-gg-sk i { width: 90px; height: 8px; border-radius: 4px; animation-duration: 1.6s; animation-timing-function: linear; animation-iteration-count: infinite; }
.mk-gg-est { min-width: 0; }
.mk-gg-th { width: 20px; height: 20px; border-radius: 5px; background: radial-gradient(circle at 70% 30%, #e6a487 0 22%, transparent 24%), linear-gradient(160deg, #25465d, #102536); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.mk-gg-th.mk-t2 { background: linear-gradient(160deg, #cdb48c, #8f7a57); }
.mk-gg-th.mk-t3 { background: linear-gradient(160deg, #d88466, #8a432a); }
.mk-gg-vinc { display: inline-flex; align-items: center; gap: 3px; margin-left: 2px; color: var(--mk-ok); }
.mk-gg-vinc .mk-i { width: 12px; height: 12px; }
.mk-gg-rep { padding: 3px 6px; margin-left: -6px; border-radius: 6px; background: rgba(255, 120, 100, .08); box-shadow: inset 0 0 0 1px rgba(255, 157, 140, .3); }
.mk-gg-rep::before { left: -6px; }
.mk-gg-rep em { color: var(--mk-erro); }
.mk-gg-audit { display: flex; align-items: center; gap: 6px; margin-top: auto; padding: 6px 8px; border-radius: 8px; background: rgba(143, 209, 158, .08); border: 1px solid rgba(143, 209, 158, .22); color: var(--mk-ok); font-size: 11.5px; }
.mk-gg-audit .mk-gg-est > span { display: inline-flex; align-items: center; gap: 6px; }
.mk-gg-audit .mk-ate7 { color: var(--mk-sub); }
.mk-gg-tic { margin-left: auto; display: grid; }

/* 9. relatorio */
.mk-rl { display: flex; flex-direction: column; gap: 9px; }
.mk-rl-topo { display: flex; align-items: center; gap: 6px; }
.mk-rl-topo h6 { margin-right: auto; font: 400 16px/1.1 var(--serif); letter-spacing: .02em; color: var(--marfim); }
.mk-rl-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mk-rl-kpi { padding: 8px 9px 7px; min-width: 0; }
.mk-rl-kpi small { display: block; font-weight: 500; color: rgba(242, 237, 227, .8); }
.mk-rl-kpi > svg { display: block; width: 100%; height: auto; margin: 6px 0 5px; overflow: visible; }
.mk-rl-a { fill: rgba(216, 132, 102, .14); animation: mkRlArea var(--T) ease var(--t0) infinite both; }
@keyframes mkRlArea { 0%, 10% { opacity: 0; } 30%, 94% { opacity: 1; } 100% { opacity: 0; } }
.mk-rl-l { fill: none; stroke: var(--terracota-claro); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; animation: mkTraco var(--T) var(--ease) var(--t0) infinite both; animation-delay: calc(var(--t0) + var(--i) * .2s); }
.mk-rl-kpi:nth-child(2) .mk-rl-l { stroke: #85afcf; } .mk-rl-kpi:nth-child(2) .mk-rl-a { fill: rgba(133, 175, 207, .14); }
.mk-rl-kpi:nth-child(3) .mk-rl-l { stroke: var(--mk-ok); } .mk-rl-kpi:nth-child(3) .mk-rl-a { fill: rgba(143, 209, 158, .12); }
.mk-rl-kpi > span { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--mk-sub); white-space: nowrap; overflow: hidden; }
.mk-rl-kpi > span .mk-i { width: 11px; height: 11px; }
.mk-rl-meio { display: grid; grid-template-columns: 1.1fr 1fr; gap: 8px; }
.mk-rl-funil, .mk-rl-orig { min-width: 0; padding: 9px 10px; }
.mk-rl-funil > small, .mk-rl-orig > small, .mk-rl-mud > small { display: block; margin-bottom: 7px; font-weight: 500; color: rgba(242, 237, 227, .8); }
.mk-rl-fb { display: grid; gap: 5px; justify-items: center; }
.mk-rl-fb span { display: grid; place-items: center; height: 24px; font-size: 11px; font-weight: 600; clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 9px 100%); animation: mkCresce var(--T) var(--ease) var(--t0) infinite both; animation-delay: calc(var(--t0) + var(--i) * .25s); }
.mk-rl-fb span:nth-child(1) { width: 100%; background: linear-gradient(90deg, #3a6c94, #5d8db3); color: #fff; }
.mk-rl-fb span:nth-child(2) { width: 76%; background: linear-gradient(90deg, #bfa47a, #dcc59c); color: var(--azul); }
.mk-rl-fb span:nth-child(3) { width: 52%; background: linear-gradient(90deg, #c66f4e, #e09a7d); color: var(--azul); }
@keyframes mkCresce { 0%, 3% { opacity: 0; transform: scaleX(.3); } 14%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
.mk-rl-od { display: flex; align-items: center; gap: 10px; }
.mk-rl-od > svg { flex: none; width: 66px; height: 66px; transform: rotate(-90deg); }
.mk-rl-tr { fill: none; stroke: rgba(242, 237, 227, .08); stroke-width: 6; }
.mk-rl-arco { fill: none; stroke: var(--c); stroke-width: 6; stroke-dasharray: var(--a) 100; stroke-dashoffset: var(--o); animation: mkArco var(--T) var(--ease) var(--t0) infinite both; animation-delay: calc(var(--t0) + var(--i) * .2s); }
@keyframes mkArco { 0%, 6% { stroke-dasharray: 0 100; } 30%, 100% { stroke-dasharray: var(--a) 100; } }
.mk-rl-od ul { display: grid; gap: 3px; min-width: 0; }
.mk-rl-od li { display: flex; align-items: center; gap: 6px; font-size: 11px; color: rgba(242, 237, 227, .85); white-space: nowrap; }
.mk-rl-od li i { flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
.mk-rl-mud { display: grid; gap: 5px; padding: 9px 10px; }
.mk-rl-mud > small { margin-bottom: 1px; }
.mk-rl-mud p { --de: translateX(-8px); display: flex; align-items: center; gap: 8px; font-size: 11.5px; }
.mk-rl-mud p em { margin-left: auto; }
.mk-rl-est { justify-items: end; }
.mk-rl-mud p span { display: grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; background: rgba(143, 209, 158, .14); color: var(--mk-ok); }
.mk-rl-mud p .mk-i { width: 11px; height: 11px; }

/* 10. mapa */
.mk-mapa .mk-corpo { padding: 0; }
.mk-mp { position: relative; min-height: 336px; overflow: hidden; background: radial-gradient(70% 70% at 45% 50%, rgba(52, 98, 136, .3), transparent 72%); }
.mk-mp-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; }
.mk-mp-grade path { stroke: rgba(242, 237, 227, .045); stroke-width: 1; fill: none; }
.mk-mp-reg { filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .45)); }
.mk-mp-reg path { stroke: #0f212e; stroke-width: 2.5; stroke-linejoin: round; }
.mk-mp-ta { fill: rgba(216, 132, 102, .58); }
.mk-mp-tb { fill: rgba(111, 156, 192, .56); }
.mk-mp-tc { fill: rgba(205, 180, 140, .5); }
.mk-mp-foco { animation: mkMpFoco var(--T) var(--t0) infinite both; }
@keyframes mkMpFoco { 0%, 14%, 96%, 100% { fill: rgba(111, 156, 192, .56); } 20%, 90% { fill: rgba(133, 175, 207, .82); } }
.mk-mp-reg .mk-mp-sem { fill: url(#mkHachura); stroke: var(--mk-erro); stroke-width: 1.8; stroke-dasharray: 6 4; animation: mkMpSem 1.6s linear infinite; }
@keyframes mkMpSem { to { stroke-dashoffset: -20; } }
.mk-mp-onda { fill: rgba(255, 120, 100, .18); stroke: var(--mk-erro); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: mkMpOnda 2.4s ease-out infinite; }
@keyframes mkMpOnda { from { transform: scale(.4); opacity: .9; } to { transform: scale(2.6); opacity: 0; } }
.mk-mp-pins circle { transform-box: fill-box; transform-origin: center; animation: mkMpPino .5s var(--ease) both; animation-delay: calc(.2s + var(--i) * 60ms); }
@keyframes mkMpPino { from { opacity: 0; transform: translateY(-10px) scale(.4); } }
.mk-mp-c { fill: var(--marfim); stroke: #0f212e; stroke-width: 1.8; }
.mk-mp-p { fill: rgba(16, 38, 58, .7); stroke: var(--marfim); stroke-width: 1.8; }
.mk-mp-x { fill: rgba(16, 38, 58, .7); stroke: var(--mk-erro); stroke-width: 2; }
.mk-mp-busca, .mk-mp-leg, .mk-mp-tip, .mk-mp-alerta, .mk-mp-base { position: absolute; z-index: 1; border-radius: 10px; background: rgba(11, 26, 39, .88); border: 1px solid rgba(242, 237, 227, .12); box-shadow: 0 14px 28px -14px rgba(0, 0, 0, .85); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.mk-mp-busca { top: 12px; left: 12px; display: flex; align-items: center; gap: 7px; width: min(214px, 60%); padding: 7px 10px; font-size: 11.5px; color: var(--mk-sub); }
.mk-mp-busca span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-mp-leg { top: 12px; right: 12px; display: grid; gap: 4px; padding: 8px 10px; font-size: 11px; color: rgba(242, 237, 227, .86); }
.mk-mp-leg b { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mk-sub); }
.mk-mp-leg span { display: flex; align-items: center; gap: 6px; }
.mk-mp-leg .mk-mp-sep { margin-top: 3px; padding-top: 6px; border-top: 1px solid rgba(242, 237, 227, .1); }
.mk-mp-leg i { flex: none; width: 10px; height: 10px; border-radius: 3px; }
.mk-mp-la { background: rgba(216, 132, 102, .9); } .mk-mp-lb { background: rgba(111, 156, 192, .95); } .mk-mp-lc { background: rgba(205, 180, 140, .9); }
.mk-mp-leg .mk-mp-lcli { border-radius: 50%; background: var(--marfim); }
.mk-mp-leg .mk-mp-lpro { border-radius: 50%; border: 2px solid var(--marfim); }
.mk-mp-tip { --de: translateY(6px); top: 50px; left: 34%; display: flex; align-items: center; gap: 8px; padding: 7px 10px 7px 7px; }
.mk-mp-tip::after { content: ""; position: absolute; left: 50%; margin-left: -5px; bottom: -6px; width: 10px; height: 10px; transform: rotate(45deg); background: rgba(11, 26, 39, .95); border-right: 1px solid rgba(242, 237, 227, .12); border-bottom: 1px solid rgba(242, 237, 227, .12); }
.mk-mp-tip b { display: block; font-size: 12px; }
.mk-mp-tip small { display: block; color: var(--mk-sub); }
.mk-mp-alerta { --de: translateY(10px); right: 12px; bottom: 12px; display: flex; align-items: center; gap: 9px; width: min(322px, calc(100% - 24px)); padding: 9px 10px; border-color: rgba(255, 157, 140, .45); background: rgba(40, 22, 24, .9); }
.mk-mp-ai { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 120, 100, .2); color: var(--mk-erro); animation: mkMpAi 1.6s ease-in-out infinite; }
@keyframes mkMpAi { 50% { box-shadow: 0 0 0 5px rgba(255, 120, 100, .15); } }
.mk-mp-alerta > div { flex: 1; min-width: 0; }
.mk-mp-alerta b { display: block; font-size: 12px; }
.mk-mp-alerta small { display: block; color: rgba(242, 237, 227, .7); }
.mk-mp-bt { flex: none; padding: 5px 9px; border-radius: 6px; background: var(--marfim); color: var(--azul); font-size: 11px; font-weight: 600; }
.mk-mp-base { left: 12px; bottom: 12px; display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; font-size: 11px; color: var(--mk-ok); }
.mk-mp-base .mk-i { width: 12px; height: 12px; }

/* coluna estreita (modal em uma coluna): mesma historia, menos pecas */
@container (max-width: 440px) {
  .mk-barra { padding: 0 10px; }
  .mk-corpo { padding: 12px; }
  .mk .mk-corpo { min-height: 0; }
  .mk-fo { grid-template-columns: 1fr; gap: 10px; align-items: stretch; }
  .mk-fo-fio, .mk-fo-velho, .mk-fo-url, .mk-fo-dono { display: none; }
  .mk-fo-det { margin-top: 0; }
  .mk-fo-campos { grid-template-columns: 1fr 1fr; gap: 6px 8px; }
  .mk-fo-tags { margin-bottom: 0; }
  .mk-ld-msg small { display: none; }
  .mk-ld-v { padding: 8px 7px; }
  .mk-ro { grid-template-columns: 1fr; }
  .mk-ro-log, .mk-ro-alerta .mk-tag { display: none; }
  .mk-ig { grid-template-columns: 1fr; }
  .mk-ig-post, .mk-ig-pt small { display: none; }
  .mk-ig-ctx { display: flex; }
  .mk-ig-painel { grid-template-columns: 1fr; gap: 6px; }
  .mk-cr-onda { flex-basis: 22%; }
  .mk-ct-quadro { grid-template-columns: 1fr; gap: 6px; }
  .mk-ct-col { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 6px; height: 48px; padding: 0 6px; }
  .mk-ct-c, .mk-ct-barra, .mk-ct-det p { display: none; }
  .mk-ct-vaga { height: 38px; }
  .mk-ct-viaja { left: 98px; top: 5px; width: calc(100% - 98px); transform: translateY(162px); animation-name: mkCtY; }
  .mk-ct-card { flex-direction: row; align-items: center; gap: 8px; height: 38px; padding: 0 8px; }
  .mk-ct-card > b { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mk-ct-tempo { margin-top: 2px; }
  .mk-ct-pub { margin-left: 0; }
  .mk-mt-abas, .mk-mt-leg, .mk-mt-status li:nth-child(3) { display: none; }
  .mk-mt-th, .mk-mt-tr { grid-template-columns: minmax(0, 1fr) 62px 30px 30px 26px; gap: 4px; padding: 0 8px; }
  .mk-mt-th span:first-child, .mk-mt-ch { display: none; }
  .mk-mt-selo { right: 8px; bottom: 4px; padding: 6px 10px; font-size: 11px; }
  .mk-mt-base { grid-template-columns: 1fr 1fr; gap: 8px; }
  .mk-mt-pc { flex-direction: column; align-items: flex-start; gap: 4px; }
  .mk-gg { grid-template-columns: 1fr; gap: 8px; }
  .mk-gg-ponte { display: none; }
  .mk-gg-grid > span:nth-child(n+17) { display: none; }
  .mk-gg-v > span > .mk-tag + .mk-tag { display: none; }
  .mk-gg-g li small { min-width: 78px; }
  .mk-rl-mes, .mk-rl-mud em { display: none; }
  .mk-rl-meio { grid-template-columns: 1fr 1fr; }
  .mk-rl-od { gap: 8px; }
  .mk-rl-od > svg { width: 46px; height: 46px; }
  .mk-mp { min-height: 320px; }
  .mk-mp-leg, .mk-mp-base { display: none; }
  .mk-mp-tip { left: 12px; top: 54px; }
  .mk-mp-tip::after { left: 46%; }
  .mk-mp-alerta { left: 12px; right: 12px; width: auto; }
}
@keyframes mkCtY {
  0% { opacity: 0; transform: translateX(-6px); } 4%, 18% { opacity: 1; transform: none; }
  24%, 43% { transform: translateY(54px); } 49%, 68% { transform: translateY(108px); }
  74%, 94% { opacity: 1; transform: translateY(162px); } 98%, 100% { opacity: 0; transform: translateY(162px); }
}

/* solucoes (painel escuro) */
.sol-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; margin-bottom: 34px; }
.sol-cab .tit { margin-bottom: 0; }
.solucoes-p .nota { margin: 22px 0 0; }

/* contato */
.contato { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(30px, 5vw, 70px); align-items: start; padding-bottom: 170px; }
.contatos { list-style: none; margin: 0; padding: 0; }
.contatos li { display: flex; align-items: center; gap: 14px; font-size: 14px; padding: 9px 0; color: rgba(242, 237, 227, .8); }
.contatos li::before { content: ""; width: 26px; height: 26px; flex: none; border: 1.5px solid var(--terracota); border-radius: 50%; background: radial-gradient(circle, var(--terracota) 0 3px, transparent 3.5px); }
.contatos a { text-decoration: none; color: var(--marfim); font-weight: 500; }
.contatos li.li-zap::before { display: none; }
.c-zap { display: inline-flex; align-items: center; gap: 12px; }
.c-zap .zap { width: 30px; height: 30px; fill: #25d366; flex: none; }
.c-zap b { font-weight: 600; }
.c-zap:hover span { color: #8de0a8; }
.social-zap .zap { width: 22px; height: 22px; fill: #25d366; stroke: none; }
.form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.campo label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 8px; color: rgba(242, 237, 227, .85); }
.campo-largo { grid-column: 1 / -1; }
.opc { font-weight: 400; letter-spacing: .02em; text-transform: none; color: rgba(242, 237, 227, .55); }
.campo input, .campo textarea {
  width: 100%; font: 400 15px/1.5 var(--sans); color: var(--marfim); background: rgba(242, 237, 227, .06);
  border: 1px solid rgba(242, 237, 227, .22); border-radius: 0; padding: 12px 14px; resize: vertical; transition: border-color .25s, background .25s;
}
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--terracota); background: rgba(242, 237, 227, .1); }
.campo.erro input, .campo.erro textarea { border-color: #ff8a7a; }
.campo .erro-msg { display: block; font-size: 12.5px; color: #ffb2a6; margin-top: 6px; }
.form-pe { grid-column: 1 / -1; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.form-msg { font-size: 14px; margin: 0; }
.form-msg.ok { color: #8de0a8; }
.form-msg.falha { color: #ffb2a6; }
.form-lgpd { grid-column: 1 / -1; font-size: 12px; color: rgba(242, 237, 227, .55); margin: 0; }
.canto {
  position: absolute; right: 0; bottom: 0; width: min(380px, 62%); padding: 30px 34px 30px 60px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  background: var(--terracota); color: var(--azul); text-decoration: none; font: 400 22px/1.15 var(--serif); text-transform: uppercase;
  clip-path: polygon(46px 0, 100% 0, 100% 100%, 0 100%, 0 46px); transition: background .3s;
}
.canto:hover { background: var(--terracota-claro); }
.canto .seta-c { background: var(--azul); }
.canto .seta-c svg { stroke: var(--terracota); }
.canto:hover .seta-c { transform: translateX(4px); }

/* rodape */
.rodape { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 26px clamp(22px, 6vw, 80px) 40px; font-size: 12px; color: var(--azul-70); }
.rodape img { height: 30px; width: auto; }
.rodape p { margin: 0; }
.rodape nav { display: flex; gap: 24px; }
.rodape nav a { text-decoration: none; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.rodape nav a:hover { color: var(--terracota-texto); }

/* revelar ao rolar (so com JS) */
.js [data-revela] { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js [data-revela].visto { opacity: 1; transform: none; }

/* sem WebGL: some com os espacos 3D */
.sem-3d .sobre-3d, .sem-3d .chip-3d { display: none; }
.sem-3d .sobre { grid-template-columns: 1fr .8fr; }
.sem-3d .difs { grid-template-columns: 1fr; }

/* ---------- responsivo ---------- */
@media (max-width: 1100px) {
  .topo-link { display: none; }
  .sobre { grid-template-columns: 1fr 1fr; }
  .metodo { grid-column: 1 / -1; }
  .metodo ol { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 20px; }
  .etq-dir { text-align: left; }
  .servicos { grid-template-columns: 1fr; }
  .solucoes { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .topo-in { grid-template-columns: auto 1fr auto; }
  .topo-logo { justify-self: center; }
  .topo-cta, .social, .topo-dir .anim-botao { display: none !important; }
  .hero-base { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 14px; bottom: 22px; }
  .hero-desc { max-width: 420px; }
  .hero-rolar { justify-self: center; }
  .hero-centro { padding-bottom: 210px; }
  .painel { --c: 24px; margin-bottom: 12px; }
  .mira { display: none; }
  .sobre, .difs, .contato { grid-template-columns: 1fr; }
  .sobre-3d { height: 360px; }
  .metodo ol { grid-template-columns: 1fr 1fr; }
  .serv-grade { grid-template-columns: repeat(2, 1fr); }
  .chip-3d { height: 380px; }
  .leque-palco { grid-template-columns: 1fr; }
  .leque { position: relative; top: auto; height: 300px; }
  .solucoes { grid-template-columns: repeat(2, 1fr); }
  .modal-grade { grid-template-columns: 1fr; }
  .mk-corpo { min-height: 240px; }
  .form { grid-template-columns: 1fr; }
  .contato { padding-bottom: 60px; }
  .canto { position: relative; width: auto; margin: 10px calc(-1 * clamp(22px, 6vw, 80px)) -60px; clip-path: polygon(30px 0, 100% 0, 100% 100%, 0 100%, 0 30px); }
}
@media (max-width: 560px) {
  .topo-logo img { height: 28px; }
  .hero-base .btn { width: 100%; }
  .serv-grade, .solucoes, .difs-lista { grid-template-columns: 1fr; }
  .srv, .sol { min-height: 0; }
  .leque { height: 240px; }
  .carta { width: 27%; }
  .leque-palco.visto .carta[data-carta="0"], .sem-animacao .carta[data-carta="0"] { --x: -102%; }
  .leque-palco.visto .carta[data-carta="1"], .sem-animacao .carta[data-carta="1"] { --x: -34%; }
  .leque-palco.visto .carta[data-carta="2"], .sem-animacao .carta[data-carta="2"] { --x: 34%; }
  .leque-palco.visto .carta[data-carta="3"], .sem-animacao .carta[data-carta="3"] { --x: 102%; }
  .modal-nav span { display: none; }
  .rodape { justify-content: center; text-align: center; }
}
/* animacoes desligadas: preferencia do sistema ou botao "Pausar animacoes" */
html.sem-animacao { scroll-behavior: auto; }
html.sem-animacao *, html.sem-animacao *::before, html.sem-animacao *::after { animation: none !important; transition: none !important; }
html.sem-animacao.js [data-revela] { opacity: 1; transform: none; }