@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/space-grotesk-latin-wght-normal.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/plus-jakarta-sans-latin-wght-normal.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('../fonts/space-mono-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('../fonts/space-mono-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
:root {
  color-scheme: only light; 
  --nk-navy: #070d2e;
  --nk-fundo: #f4f6fb;
  --nk-branco: #ffffff;
  --nk-texto: #0b1220;
  --nk-texto-2: #475569;
  --nk-texto-3: #5b6880;
  --nk-acento: #0152ba;
  --nk-link: #0836b1;
  --nk-botao-a: #0a3fb8;
  --nk-botao-b: #0178c7;
  --nk-ciano: #2dccc7;
  --nk-ciano-2: #039ccc;
  --nk-borda: #e2e7f0;
  --nk-enchente: #eef0f3;
  --nk-horizonte: linear-gradient(90deg, #171fb0, #0152ba, #039ccc, #2dccc7);
  --nk-titulo: 'Space Grotesk', 'Plus Jakarta Sans', system-ui, sans-serif;
  --nk-corpo: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  
  --navy: var(--nk-navy);
  --fundo: var(--nk-fundo);
  --branco: var(--nk-branco);
  --texto: var(--nk-texto);
  --texto-2: var(--nk-texto-2);
  --texto-3: var(--nk-texto-3);
  --acento: var(--nk-acento);
  --link: var(--nk-link);
  --bot-a: var(--nk-botao-a);
  --bot-b: var(--nk-botao-b);
  --ciano: var(--nk-ciano);
  --ciano-2: var(--nk-ciano-2);
  --borda: var(--nk-borda);
  --enchente: var(--nk-enchente);
  --horizonte: var(--nk-horizonte);
  --verde: #047857;
  --verde-f: #ecfdf5;
  --ambar: #b45309;
  --ambar-f: #fffbeb;
  --azul-f: #eef4ff;
  --chuva: #3b6fc4;
  --f-tit: var(--nk-titulo);
  --f-txt: var(--nk-corpo);
  --f-mono: 'Space Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  
  --mola: linear(0, 0.023, 0.084, 0.17, 0.271, 0.379, 0.488, 0.592, 0.688, 0.774, 0.848, 0.911, 0.962, 1.001, 1.031, 1.052, 1.066, 1.073, 1.075, 1.073, 1.069, 1.062, 1.055, 1.047, 1.038, 1.031, 1.023, 1.017, 1.011, 1.007, 1.003, 1, 0.998, 0.996, 0.995, 0.995, 0.994, 0.995, 0.995, 0.995, 0.996, 0.997, 0.997, 0.998, 0.998, 0.999, 0.999, 0.999, 1);
  --sombra: 0 1px 2px rgb(11 18 32 / 6%), 0 18px 48px rgb(11 18 32 / 10%);
  --lado: clamp(16px, 4vw, 48px);
}
@supports not (transition-timing-function: linear(0, 1)) { :root { --mola: cubic-bezier(.2, 1.32, .4, 1); } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 400 16px/1.6 var(--f-txt);
  font-variant-numeric: tabular-nums;
}
h1, h2, h3, h4 { font-family: var(--f-tit); letter-spacing: -0.02em; text-wrap: balance; margin: 0; }
p { margin: 0; }
a { color: var(--link); }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--ciano-2); outline-offset: 3px; border-radius: 6px; }

.cont { width: 100%; max-width: calc(1240px + 2 * var(--lado)); margin: 0 auto; padding-left: max(var(--lado), env(safe-area-inset-left, 0px)); padding-right: max(var(--lado), env(safe-area-inset-right, 0px)); }

.so-leitor { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.olho { font: 600 0.8125rem/1.4 var(--f-txt); letter-spacing: 0.08em; text-transform: uppercase; color: var(--acento); }
.nota { font-size: 0.8125rem; color: var(--texto-3); max-width: 90ch; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 12px 18px;
  border-radius: 999px; font: 600 0.96875rem/1.2 var(--f-txt); text-decoration: none; cursor: pointer; touch-action: manipulation;
  transition: transform 160ms var(--ease-out), filter 160ms ease;
}
.btn:active { transform: scale(0.97); }
.btn-whats { color: var(--branco); background: linear-gradient(135deg, var(--bot-a), var(--bot-b)); box-shadow: 0 8px 22px rgb(1 82 186 / 25%); }
.btn-sec { color: var(--acento); background: var(--branco); border: 1px solid var(--borda); }
@media (hover: hover) and (pointer: fine) { .btn-whats:hover { filter: brightness(1.08); } .btn-sec:hover { border-color: var(--acento); } }

.chuva {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
}
.chuva i {
  position: absolute; top: 0; font: 400 12px/2 var(--f-mono); font-style: normal;
  color: var(--chuva); white-space: pre; text-align: center;
  animation: subir var(--dur, 24s) linear infinite; animation-delay: var(--atraso, 0s);
  opacity: var(--op, 0.07); will-change: transform;
}
@keyframes subir { from { transform: translateY(0); } to { transform: translateY(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .chuva i { animation: none !important; }
}

.c-abertura {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, var(--branco) 0%, var(--fundo) 100%);
  padding: 20px 0 44px;
}
.c-abertura::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--horizonte); }

.topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: clamp(14px, 3vw, 28px); }
.topo img { height: 76px; width: auto; display: block; }
.topo nav { display: flex; align-items: center; gap: 6px 18px; flex-wrap: wrap; justify-content: flex-end; }
.topo nav a { font-weight: 600; font-size: 0.9375rem; text-decoration: none; color: var(--texto-2); padding: 10px 2px; }

.grade { display: grid; gap: 40px; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.3fr); align-items: center; }
.texto { display: grid; gap: 18px; align-content: center; }
.titulo { font-weight: 600; font-size: clamp(2rem, 3.7vw, 2.85rem); line-height: 1.06; }
.titulo em { font-style: normal; background: var(--horizonte); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sub { font-size: clamp(0.96875rem, 1.3vw, 1.0625rem); color: var(--texto-2); max-width: 42ch; }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; }

.fabrica { background: rgb(255 255 255 / 72%); border: 1px solid var(--borda); border-radius: 20px; box-shadow: var(--sombra); overflow: hidden; display: grid; min-width: 0; }
.fab-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--borda); font-size: 0.8125rem; color: var(--texto-2); background: var(--branco); }
.fab-cab b { color: var(--texto); font-weight: 600; }
.fila { display: inline-flex; align-items: center; gap: 6px; }
.fila i { width: 7px; height: 7px; border-radius: 50%; background: var(--borda); transition: background 300ms ease, transform 300ms var(--ease-out); }
.fila i.on { background: var(--acento); transform: scale(1.25); }
.aovivo { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--verde); font-size: 0.75rem; white-space: nowrap; }
.aovivo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--verde); animation: pulsa 1.4s ease-in-out infinite; }
@keyframes pulsa { 50% { opacity: 0.35; transform: scale(0.8); } }

.palco { position: relative; display: grid; grid-template-columns: minmax(0, 0.6fr) minmax(0, 0.95fr) minmax(0, 1.05fr); align-items: center; gap: 0; padding: 18px 16px; min-height: 380px; }
.palco canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.palco > :not(canvas) { position: relative; z-index: 1; }
.cerebro { min-height: 320px; }

.pedido { display: grid; gap: 6px; transition: opacity 420ms var(--ease-out), transform 520ms var(--ease-out); }
.pedido-quem { display: flex; align-items: center; gap: 6px; font-size: 0.6875rem; color: var(--texto-3); font-weight: 600; }
.pedido-quem i { width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, #cbd5e1, #94a3b8); display: block; }
.pedido .bolha { padding: 9px 12px; border-radius: 14px 14px 14px 4px; background: var(--branco); border: 1px solid var(--borda); font-size: 0.8125rem; line-height: 1.4; box-shadow: 0 6px 16px rgb(11 18 32 / 6%); min-height: 3.6em; }
.pedido small { font-size: 0.6875rem; color: var(--texto-3); }
.pedido.enviado { opacity: 0.55; transform: scale(0.97); }

.pedido mark { color: inherit; font-weight: 600; background: linear-gradient(transparent 60%, rgb(45 204 199 / 45%) 60%) no-repeat 0 0 / 0% 100%; transition: background-size 520ms var(--ease-out); border-radius: 2px; }
.pedido mark.on { background-size: 100% 100%; }

.montagem { display: grid; gap: 8px; align-content: start; }
.selo-no-ar { justify-self: end; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--navy); color: var(--branco); font-weight: 700; font-size: 0.8125rem; box-shadow: var(--sombra); }
.selo-no-ar::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ciano); }

.legenda { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--borda); background: var(--branco); font-size: 0.8125rem; color: var(--texto-2); min-height: 44px; }
.legenda b { color: var(--acento); font-weight: 700; }
.legenda .passos-l { margin-left: auto; display: flex; gap: 4px; }
.legenda .passos-l i { width: 18px; height: 4px; border-radius: 2px; background: var(--borda); transition: background 300ms ease; }
.legenda .passos-l i.on { background: var(--ciano-2); }
.legenda .passos-l i.feito { background: var(--acento); }

.app { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); background: var(--branco); border-radius: 12px; overflow: hidden; border: 1px solid var(--borda); box-shadow: 0 10px 30px rgb(11 18 32 / 10%); transition: opacity 420ms var(--ease-out), transform 520ms var(--ease-out), box-shadow 420ms ease, border-color 420ms ease; }

.app::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transform: translateY(-100%); background: linear-gradient(180deg, transparent 30%, rgb(45 204 199 / 26%) 50%, transparent 70%); }
.montagem.testando .app::after { animation: varre 900ms linear 1; }
@keyframes varre { 0% { opacity: 1; transform: translateY(-70%); } 100% { opacity: 1; transform: translateY(70%); } }
.montagem.revisado .app { border-color: rgb(4 120 87 / 60%); box-shadow: 0 0 0 3px rgb(4 120 87 / 14%), 0 10px 30px rgb(11 18 32 / 10%); }
.app-lado { background: var(--navy); display: grid; align-content: start; justify-items: center; gap: 10px; padding: 10px 0; }
.app-lado i { width: 20px; height: 20px; border-radius: 6px; background: rgb(255 255 255 / 14%); display: block; }
.app-lado i.on { background: var(--ciano); }
.app-lado i:first-child { background: var(--horizonte); border-radius: 50%; }
.app-corpo { padding: 10px 12px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.app-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 8px; }
.app-cab b { font: 600 0.875rem/1.2 var(--f-tit); }
.app-cab small { font-size: 0.6875rem; color: var(--texto-3); }
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.kpis .kpi:nth-child(3) { grid-column: 1 / -1; }
.kpi { border: 1px solid var(--borda); border-left: 3px solid var(--acento); border-radius: 8px; padding: 5px 8px; display: grid; gap: 0; min-width: 0; }
.kpi span { font-size: 0.65625rem; color: var(--texto-2); line-height: 1.3; }
.kpi b { font-size: 0.875rem; font-weight: 700; line-height: 1.3; white-space: nowrap; }
.kpi.verde { border-left-color: var(--verde); }
.kpi.ambar { border-left-color: var(--ambar); }
.barras { display: flex; align-items: flex-end; gap: 4px; height: 46px; padding: 3px 2px 0; border-bottom: 1px solid var(--borda); }
.barras i { flex: 1; background: #d6e4f7; border-radius: 3px 3px 0 0; height: var(--h); }
.barras i.alta { background: var(--acento); }
.lista { display: grid; gap: 4px; font-size: 0.71875rem; }
.lista div { display: flex; justify-content: space-between; gap: 8px; padding: 4px 8px; border-radius: 6px; background: var(--fundo); }
.lista div span:last-child { font-weight: 700; white-space: nowrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 2px 9px; border-radius: 999px; font-weight: 600; font-size: 0.6875rem; background: var(--verde-f); color: var(--verde); max-width: 100%; }
.chip.azul { background: var(--azul-f); color: var(--link); }
.chip.ambar { background: var(--ambar-f); color: var(--ambar); }
.agenda { display: grid; gap: 4px; }
.hora { display: grid; grid-template-columns: 3em minmax(0, 1fr) auto; align-items: center; gap: 6px; font-size: 0.75rem; padding: 5px 8px; border-radius: 8px; background: var(--fundo); }
.hora em { font-style: normal; color: var(--texto-2); font-size: 0.6875rem; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.molas { display: inline-flex; gap: 3px; }
.molas i { width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--acento); }
.molas i.c { background: var(--acento); }
.zap { display: grid; gap: 6px; }
.bolha-z { max-width: 88%; padding: 6px 10px; border-radius: 12px 12px 12px 4px; background: var(--fundo); font-size: 0.75rem; line-height: 1.4; }
.bolha-z.eu { justify-self: end; border-radius: 12px 12px 4px 12px; background: #e3eefc; }

.fpeca { transition: opacity 360ms var(--ease-out), transform 768ms var(--mola); }
.fanim .fpeca:not(.on) { opacity: 0; transform: translateX(-46px) scale(0.92); }
.fanim .selo-no-ar:not(.on) { transform: scale(0.8); }
.fanim .fpeca.on { animation: encaixa 768ms var(--mola) both; }
@keyframes encaixa { from { opacity: 0; transform: translateX(-46px) scale(0.92); } }

.fanim .montagem:not(.desenho) .app { opacity: 0; transform: scale(0.96); }
.fanim .fpeca.esboco:not(.on) { opacity: 1; transform: none; transition: opacity 280ms ease; color: transparent; background: rgb(1 82 186 / 3%); border-color: transparent; box-shadow: none; outline: 1.5px dashed rgb(1 82 186 / 32%); outline-offset: -1.5px; border-radius: 8px; }
.fanim .fpeca.esboco:not(.on) * { visibility: hidden; }
.montagem.troca { opacity: 0; transition: opacity 240ms ease; }

@media (max-width: 1099px) {
  .grade { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .sub { max-width: 60ch; }
}

@media (max-width: 699px) {
  .c-abertura { padding: 14px 0 26px; }
  .topo { margin-bottom: 14px; }
  .topo img { height: 50px; }
  .topo nav { display: none; }
  .texto { gap: 12px; }
  .titulo { font-size: clamp(1.75rem, 7.4vw, 2.1rem); }
  .sub { font-size: 0.9375rem; }
  .acoes .btn-sec { display: none; }
  .acoes .btn-whats { width: 100%; }
  .grade { gap: 18px; }
  .fab-cab { padding: 8px 12px; font-size: 0.75rem; }
  .fab-cab .nome-obra { display: none; }
  .palco { grid-template-columns: minmax(0, 1fr); padding: 14px 12px; min-height: 0; gap: 0; }
  .cerebro { min-height: 200px; }
  .pedido { max-width: 92%; }
  
  .legenda { padding: 8px 12px; font-size: 0.75rem; min-height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .aovivo::before { animation: none !important; }
  .fpeca, .pedido, .montagem, .app, .pedido mark { transition: none !important; animation: none !important; }
}

.c-depois { background: var(--branco); padding: clamp(56px, 8vw, 104px) 0; position: relative; overflow: hidden; scroll-margin-top: 0; }

.c-depois::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--horizonte); }
.cab-sec { display: grid; gap: 12px; max-width: 640px; }
.cab-sec h2 { font-size: clamp(1.75rem, 4vw, 2.6rem); font-weight: 600; line-height: 1.08; }
.cab-sec p { color: var(--texto-2); font-size: 1.0625rem; max-width: 56ch; }
.fileira { margin-top: clamp(36px, 5vw, 56px); display: grid; gap: 18px; }
.fileira-cab { display: flex; align-items: baseline; gap: 12px; border-top: 1px solid var(--borda); padding-top: 18px; }
.fileira-cab h3 { font-size: 1.25rem; font-weight: 600; }
.fileira-cab span { font-size: 0.8125rem; color: var(--texto-3); font-weight: 600; }
.trilho { display: grid; gap: 24px; align-items: start; }
.trilho.familia { grid-template-columns: 300px repeat(2, minmax(0, 1fr)); }
.trilho.ofertas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.trilho.medida { grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: center; }
.caso { display: grid; gap: 14px; min-width: 0; width: 100%; }
.trilho.medida .caso { width: auto; justify-items: center; }
.leg { display: grid; gap: 4px; }
.trilho.medida .leg { text-align: center; max-width: 300px; }
.leg h4 { font-size: 1.0625rem; font-weight: 600; }
.leg p { font-size: 0.9375rem; color: var(--texto-2); max-width: 46ch; }
.c-depois .nota { margin-top: 28px; font-size: 0.875rem; }
.dica-arraste { display: none; }

.nav { background: var(--branco); border: 1px solid var(--borda); border-radius: 12px; overflow: hidden; box-shadow: var(--sombra); min-width: 0; }
.nav-barra { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; background: #f6f8fb; border-bottom: 1px solid var(--borda); }
.nav-barra > i { width: 9px; height: 9px; border-radius: 50%; background: #dfe4ec; flex: none; }
.nav-aba { margin-left: 10px; display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px; border-radius: 7px 7px 0 0; background: var(--branco); border: 1px solid var(--borda); border-bottom: 0; align-self: flex-end; font-size: 0.6875rem; font-weight: 600; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.nav-aba b { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.nav-tela { container-type: inline-size; position: relative; overflow: hidden; }
.cel { width: 300px; padding: 10px; border-radius: 44px; background: #0b1220; box-shadow: var(--sombra), inset 0 0 0 2px #2a3245; flex: none; }
.cel-tela { position: relative; height: 600px; border-radius: 34px; overflow: hidden; }
.cel-status { position: absolute; z-index: 5; top: 0; left: 0; right: 0; height: 40px; display: flex; align-items: center; justify-content: space-between; padding: 6px 24px 0 26px; font: 600 12px/1 'Geist', var(--f-txt); pointer-events: none; }
.cel-status::before { content: ""; position: absolute; left: 50%; top: 10px; width: 84px; height: 24px; border-radius: 14px; background: #000; transform: translateX(-50%); }
.cel-status i { display: inline-flex; gap: 2px; align-items: flex-end; }
.cel-status i b { width: 3px; background: currentColor; border-radius: 1px; }
.cel-casa { position: absolute; z-index: 5; bottom: 7px; left: 50%; width: 104px; height: 4px; border-radius: 2px; transform: translateX(-50%); background: currentColor; opacity: 0.35; }

.peca { transition: opacity 380ms var(--ease-out), transform 640ms var(--ease-out); }
.anim .peca:not(.on) { opacity: 0; transform: translateY(8px); }
.anim .peca.mola { transition: opacity 300ms var(--ease-out), transform 768ms var(--mola); }
.anim .peca.mola:not(.on) { transform: scale(0.86); }
.regua i, .barra-x { transform-origin: left center; transition: transform 900ms var(--ease-out); }
.anim .regua i:not(.on), .anim .barra-x:not(.on) { transform: scaleX(0); }
.traco { transition: stroke-dashoffset 1400ms var(--ease-out); }

.t-pier { background: #F6F4EF; color: #1F2023; font-family: 'Geist', system-ui, sans-serif; }
.t-pier .cel-status { color: #1F2023; }
.tp-corpo { padding: 50px 14px 20px; display: grid; gap: 11px; }
.tp-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.tp-topo b { display: block; font-size: 19px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.tp-topo small { font-size: 11.5px; color: #5D584F; }
.tp-dado { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; border: 1px solid #E6E2D8; background: #FDFCF9; font-size: 9.5px; color: #5D584F; white-space: nowrap; margin-top: 3px; }
.tp-dado i { width: 6px; height: 6px; border-radius: 50%; background: #1F2023; }
.tp-dado b { display: inline; font-size: 9.5px; color: #1A4AA8; font-weight: 600; letter-spacing: 0; }
.tp-heroi { position: relative; background: #FDFCF9; border: 1px solid #E6E2D8; border-radius: 12px; padding: 14px 13px 13px; display: grid; gap: 6px; overflow: hidden; box-shadow: 0 1px 2px rgb(31 32 35 / 5%); }
.tp-heroi::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #1E56C4, #6D28D9, #B91C1C); }
.tp-selo { justify-self: start; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: #E7F3EA; border: 1px solid #CFE5D6; color: #15803D; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; }
.tp-selo svg { width: 11px; height: 11px; }
.tp-quando { font-size: 9.5px; font-weight: 600; letter-spacing: 0.08em; color: #5D584F; }
.tp-valor { font: 600 34px/1 'Geist Mono', ui-monospace, monospace; letter-spacing: -0.04em; }
.tp-linha { font-size: 11.5px; color: #5D584F; padding-bottom: 8px; border-bottom: 1px solid #E6E2D8; }
.tp-comp { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center; padding: 6px; border-radius: 9px; background: #EAF5EE; border: 1px solid #CFE5D6; }
.tp-comp b { font: 600 14px/1 'Geist Mono', monospace; color: #15803D; padding: 8px 9px; border-radius: 7px; background: #F3FAF5; border: 1px solid #CFE5D6; }
.tp-comp span { font-size: 10.5px; color: #3f3b35; line-height: 1.35; }
.tp-sec { display: flex; align-items: center; gap: 7px; margin: 4px 0 -2px; font-size: 10px; font-weight: 600; letter-spacing: 0.1em; color: #5D584F; }
.tp-sec i { width: 16px; height: 16px; border-radius: 5px; background: #E9F0FC; box-shadow: inset 0 0 0 4px #E9F0FC, inset 0 0 0 10px #1E56C4; }
.tp-sec a { color: #1E56C4; letter-spacing: 0; font-size: 11px; text-decoration: none; }
.tp-metricas { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.tp-m { background: #FDFCF9; border: 1px solid #E6E2D8; border-radius: 10px; padding: 8px 9px 7px; display: grid; gap: 3px; }
.tp-m span { display: flex; justify-content: space-between; align-items: center; font-size: 10.5px; color: #3f3b35; }
.tp-m em { font: 600 9px/1 'Geist Mono', monospace; font-style: normal; padding: 3px 4px; border-radius: 4px; }
.tp-m em.neg { color: #9C4707; background: #FBEFE4; }
.tp-m em.pos { color: #15803D; background: #E7F3EA; }
.tp-m em.azul { color: #1A4AA8; background: #E9F0FC; }
.tp-m b { font: 600 17px/1.15 'Geist Mono', monospace; letter-spacing: -0.03em; }
.tp-m small { font-size: 8.5px; color: #736D63; text-align: right; }
.regua { position: relative; height: 4px; border-radius: 2px; background: #ECE8DF; }
.regua i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); border-radius: 2px; background: #9C4707; }
.regua i.verde { background: #15803D; } .regua i.azul { background: #1E56C4; }
.regua u { position: absolute; top: -2px; width: 1.5px; height: 8px; left: var(--m); background: #736D63; }
.tp-leitura { background: #FDFCF9; border: 1px solid #E6E2D8; border-left: 3px solid #1E56C4; border-radius: 10px; padding: 9px 11px; font-size: 11px; line-height: 1.5; color: #3f3b35; }
.tp-leitura b { color: #1F2023; }

.t-psi { background: #f7f8f9; color: #0d1f2d; font: 400 12px/1.5 'IBM Plex Sans', system-ui, sans-serif; }
.ps-hd { display: flex; align-items: center; gap: 9px; padding: 9px 14px; background: #fff; border-bottom: 1px solid #e6e8eb; }
.ps-lg { width: 30px; height: 30px; border-radius: 7px; border: 1px solid #e6e8eb; display: grid; place-items: center; font: 600 15px/1 'IBM Plex Serif', serif; color: #143847; background: linear-gradient(135deg, #eef3f6, #fff); }
.ps-hd div { display: grid; line-height: 1.2; }
.ps-hd b { font: 600 13px/1.2 'IBM Plex Serif', serif; letter-spacing: -0.01em; }
.ps-hd small { font-size: 9px; color: #6b7682; }
.ps-bt { margin-left: auto; font-size: 10px; font-weight: 600; color: #fff; background: #143847; padding: 6px 11px; border-radius: 7px; white-space: nowrap; }
.ps-ct { padding: 12px 14px 14px; display: grid; gap: 10px; }
.ps-emp { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 12px; background: #fff; border: 1px solid #e6e8eb; border-left: 4px solid #3aa8a3; border-radius: 10px; padding: 9px 12px; }
.ps-emp div { display: grid; line-height: 1.25; }
.ps-emp small { font: 500 8.5px/1.3 'IBM Plex Mono', monospace; letter-spacing: 0.06em; color: #6b7682; }
.ps-emp b { font-size: 13px; font-weight: 600; }
.ps-emp span { display: flex; gap: 5px; flex-wrap: wrap; }
.ps-emp span i { font-style: normal; font-size: 9.5px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: #eef3f6; color: #143847; }
.ps-hero { display: flex; gap: 16px; align-items: center; background: #fff; border: 1px solid #e6e8eb; border-radius: 10px; padding: 12px 14px; box-shadow: 0 1px 1px rgba(13,31,45,.04), 0 2px 4px rgba(13,31,45,.05); }
.ps-num { font: 600 42px/0.9 'IBM Plex Serif', serif; color: #143847; white-space: nowrap; }
.ps-num small { font-size: 16px; color: #6b7682; font-weight: 400; }

.ps-num b { display: inline-block; min-width: 2ch; text-align: right; font-variant-numeric: tabular-nums; }
.ps-lab { font: 500 8.5px/1.3 'IBM Plex Mono', monospace; letter-spacing: 0.06em; color: #6b7682; }
.ps-qual { display: inline-block; margin-top: 5px; font-size: 10.5px; font-weight: 600; padding: 2px 10px; border-radius: 20px; background: #FDF5E6; color: #8a6508; }
.ps-ctx { font-size: 10.5px; color: #3d4f5c; margin-top: 6px; }
.ps-cc { background: #fff; border: 1px solid #e6e8eb; border-radius: 10px; padding: 11px 12px; box-shadow: 0 1px 1px rgba(13,31,45,.04), 0 2px 4px rgba(13,31,45,.05); }
.ps-st { font: 600 12px/1.3 'IBM Plex Serif', serif; letter-spacing: -0.01em; }
.ps-ss { font-size: 9.5px; color: #6b7682; margin: 2px 0 8px; }
.ps-mapa { display: grid; grid-template-columns: auto repeat(5, minmax(0, 34px)); gap: 3px; align-items: center; justify-content: start; }
.ps-mapa > span { font-size: 8.5px; font-weight: 600; color: #3d4f5c; text-align: center; white-space: nowrap; overflow: hidden; }
.ps-mapa > b { font-size: 10px; font-weight: 600; text-align: right; padding-right: 8px; white-space: nowrap; }
.ps-c { display: grid; place-items: center; height: 24px; border-radius: 5px; font: 600 10px/1 'IBM Plex Mono', monospace; transition: background-color 420ms ease, color 420ms ease, transform 420ms var(--ease-out); }
.ps-c.b { background: #E6F2EF; color: #143847; }
.ps-c.m { background: #7FC4BD; color: #0E2A35; }
.ps-c.a { background: #2E7D78; color: #fff; }
.ps-c.x { background: #F1F4F5; color: #8b96a3; }
.ps-c.x svg { width: 10px; height: 10px; }
.anim .ps-c:not(.on) { background: #F1F4F5; color: transparent; transform: scale(0.8); }
.anim .ps-c.x:not(.on) svg { opacity: 0; }
.ps-ins { display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ps-ic { background: #fff; border: 1px solid #e6e8eb; border-left: 3px solid #3aa8a3; border-radius: 9px; padding: 8px 10px; }
.ps-ic b { display: block; font-size: 10.5px; font-weight: 600; line-height: 1.3; }
.ps-ic span { display: block; font-size: 9.5px; color: #3d4f5c; margin-top: 3px; line-height: 1.4; }
@container (max-width: 520px) {
  .ps-ins { grid-template-columns: 1fr; }
  .ps-ins .ps-ic:nth-child(n+2) { display: none; }
  .ps-bt { display: none; }
}

.t-chu { background: radial-gradient(420px 260px at 100% 0%, rgb(30 158 87 / 9%), transparent 70%), #f6f4f1; color: #1c1a17; font: 400 12px/1.45 'Hanken Grotesk', system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.ch-hd { display: flex; align-items: center; gap: 9px; padding: 9px 14px; background: #fff; border-bottom: 1px solid #e9e4dd; }
.ch-b { width: 26px; height: 26px; border-radius: 7px; background: #1e9e57; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.ch-hd div { display: grid; line-height: 1.15; }
.ch-hd b { font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; }
.ch-hd small { font-size: 10px; color: #6e665d; }
.ch-comp { margin-left: auto; display: flex; align-items: center; gap: 4px; font-size: 8.5px; font-weight: 700; letter-spacing: 0.06em; color: #9a9286; white-space: nowrap; }
.ch-comp i { font-style: normal; letter-spacing: 0; font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 7px; border: 1px solid #e9e4dd; color: #6e665d; background: #fff; }
.ch-comp i.on { background: #e8f5ed; border-color: #bfe3cc; color: #14793f; }
.ch-meio { display: grid; grid-template-columns: 112px minmax(0, 1fr); }
.ch-lado { padding: 12px 10px; border-right: 1px solid #e9e4dd; background: rgb(255 255 255 / 55%); display: grid; align-content: start; gap: 2px; }
.ch-lado small { font-size: 8px; font-weight: 800; letter-spacing: 0.1em; color: #9a9286; margin: 6px 0 2px; }
.ch-lado small:first-child { margin-top: 0; }
.ch-lado span { font-size: 10.5px; color: #6e665d; padding: 4px 7px; border-radius: 7px; white-space: nowrap; }
.ch-lado span.on { background: #e8f5ed; color: #14793f; font-weight: 700; }
.ch-main { padding: 12px 14px 14px; display: grid; gap: 10px; min-width: 0; }
.ch-per { display: flex; gap: 4px; flex-wrap: wrap; }
.ch-per i { font-style: normal; font-size: 10px; font-weight: 600; padding: 3px 9px; border-radius: 8px; background: #fff; border: 1px solid #e9e4dd; color: #6e665d; }
.ch-per i.on { background: #1c1a17; border-color: #1c1a17; color: #fff; }
.ch-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.ch-k { position: relative; overflow: hidden; background: #fff; border: 1px solid #e9e4dd; border-radius: 12px; padding: 9px 10px 8px; min-height: 70px; box-shadow: 0 1px 2px rgb(28 26 23 / 4%); }
.ch-k small { display: block; font-size: 8.5px; font-weight: 700; letter-spacing: 0.06em; color: #9a9286; text-transform: uppercase; }
.ch-k b { display: block; margin-top: 4px; font-size: 17px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; white-space: nowrap; }
.ch-k span { display: block; margin-top: 4px; font-size: 9.5px; color: #6e665d; white-space: nowrap; }
.ch-k span em { font-style: normal; font-weight: 700; color: #14793f; }
.ch-k span em.neg { color: #c23b3b; }
.ch-k svg { position: absolute; right: 7px; top: 9px; width: 36px; height: 14px; overflow: visible; }
.ch-k svg path { fill: none; stroke: #1e9e57; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ch-graf { background: #fff; border: 1px solid #e9e4dd; border-radius: 12px; padding: 10px 12px 8px; }
.ch-graf-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ch-graf-cab b { font-size: 11.5px; font-weight: 700; }
.ch-graf-cab span { display: flex; gap: 9px; font-size: 9px; color: #6e665d; white-space: nowrap; }
.ch-graf-cab span i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 3px; vertical-align: -1px; }
.ch-graf svg { display: block; width: 100%; height: 92px; margin-top: 6px; overflow: visible; }
.ch-graf .eixo text { font: 500 8px 'Hanken Grotesk', sans-serif; fill: #9a9286; }
.ch-bar { fill: #e9b679; transform-box: fill-box; transform-origin: bottom; transition: transform 700ms var(--ease-out); }
.anim .ch-bar:not(.on) { transform: scaleY(0); }
.ch-ler { background: #fff; border: 1px solid #e9e4dd; border-left: 3px solid #1e9e57; border-radius: 12px; padding: 9px 12px; display: grid; gap: 4px; }
.ch-ler small { font-size: 8.5px; font-weight: 800; letter-spacing: 0.08em; color: #14793f; }
.ch-ler p { font-size: 11px; color: #3b3732; line-height: 1.45; }
.ch-ler p b { color: #1c1a17; }
@container (max-width: 560px) {
  .ch-meio { grid-template-columns: minmax(0, 1fr); }
  .ch-lado { display: none; }
  .ch-comp { display: none; }
  .ch-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ch-kpis .ch-k:nth-child(n+5) { display: none; }
}

.t-nfc { --nfc-ease: cubic-bezier(.19, 1, .22, 1); background: #000; color: #fff; font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing: antialiased; }
.t-nfc .cel-status { color: #fff; }
.tn-faixa { position: absolute; top: 0; left: 0; right: 0; height: 36%; overflow: hidden; background: #0a0a0a; z-index: 1; }
.tn-faixa img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 36% 12%; transform: scale(1.06);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 48%, rgba(0,0,0,.72) 70%, rgba(0,0,0,.28) 87%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 48%, rgba(0,0,0,.72) 70%, rgba(0,0,0,.28) 87%, transparent 100%); }
.tn-faixa::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.26) 0%, rgba(0,0,0,.05) 26%, rgba(0,0,0,.18) 52%, rgba(0,0,0,.62) 76%, rgba(0,0,0,.92) 92%, #000 100%); }
.tn-folha { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; padding: 0 20px 22px; }
.tn-folha::before { content: ""; display: block; height: 30%; flex: none; }
.tn-marca { text-align: center; flex: none; }
.tn-logo { position: relative; display: inline-block; width: 140px; }
.tn-logo img { width: 100%; height: auto; display: block; }
.tn-lustro { position: absolute; inset: 0; pointer-events: none; opacity: 0;
  -webkit-mask-image: url(../ativos/cyrne-logo.png); mask-image: url(../ativos/cyrne-logo.png);
  -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  background: linear-gradient(100deg, transparent 40%, rgba(255,255,255,.85) 50%, transparent 60%); background-size: 300% 100%; background-position: 200% 0; }
.tn-lema { margin: 10px auto 0; max-width: 220px; font-size: 8px; font-weight: 300; line-height: 1.95; letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.82); text-wrap: balance; }
.tn-destinos { padding-top: 12px; }
.tn-ida { position: relative; display: flex; align-items: center; gap: 11px; min-height: 38px; padding: 7px 12px; border-radius: 9px; margin-bottom: 4px;
  background: linear-gradient(168deg, rgba(255,255,255,.085) 0%, rgba(255,255,255,.05) 38%, rgba(255,255,255,.024) 72%, rgba(255,255,255,.009) 100%); }
.tn-ida::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; transform-origin: left;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.26) 18%, rgba(255,255,255,.30) 50%, rgba(255,255,255,.26) 82%, transparent 100%); }
.tn-num { flex: none; width: 20px; font-size: 8px; font-weight: 300; letter-spacing: .06em; color: rgba(255,255,255,.56); font-variant-numeric: tabular-nums; }
.tn-nome { flex: 1; min-width: 0; font-size: 10px; font-weight: 400; letter-spacing: .155em; text-transform: uppercase; white-space: nowrap; }
.tn-risco { flex: none; width: 16px; height: 1px; background: rgba(255,255,255,.62); }
.tn-pe { margin: auto 0 0; padding-top: 14px; text-align: center; font-size: 7px; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.46); }

.t-nfc.abre .tn-faixa { animation: tn-recolher 1250ms var(--nfc-ease) 1150ms both; }
.t-nfc.abre .tn-faixa img { animation: tn-assentar 4200ms var(--nfc-ease) 120ms both, tn-acender 1500ms var(--nfc-ease) 180ms both; }
.t-nfc.abre .tn-logo { animation: tn-subir 1000ms var(--nfc-ease) 2050ms both; }
.t-nfc.abre .tn-lema { animation: tn-subir 900ms var(--nfc-ease) 2240ms both; }
.t-nfc.abre .tn-lustro { animation: tn-lustrar 1800ms var(--nfc-ease) 2800ms both; }
.t-nfc.abre .tn-ida { animation: tn-subir 820ms var(--nfc-ease) both; }
.t-nfc.abre .tn-ida::before { animation: tn-tracar 1100ms var(--nfc-ease) both; }
.t-nfc.abre .tn-ida:nth-child(1) { animation-delay: 2400ms; } .t-nfc.abre .tn-ida:nth-child(1)::before { animation-delay: 2360ms; }
.t-nfc.abre .tn-ida:nth-child(2) { animation-delay: 2470ms; } .t-nfc.abre .tn-ida:nth-child(2)::before { animation-delay: 2430ms; }
.t-nfc.abre .tn-ida:nth-child(3) { animation-delay: 2540ms; } .t-nfc.abre .tn-ida:nth-child(3)::before { animation-delay: 2500ms; }
.t-nfc.abre .tn-ida:nth-child(4) { animation-delay: 2610ms; } .t-nfc.abre .tn-ida:nth-child(4)::before { animation-delay: 2570ms; }
.t-nfc.abre .tn-ida:nth-child(5) { animation-delay: 2680ms; } .t-nfc.abre .tn-ida:nth-child(5)::before { animation-delay: 2640ms; }
.t-nfc.abre .tn-pe { animation: tn-subir 800ms var(--nfc-ease) 3000ms both; }
@keyframes tn-recolher { from { height: 100%; } to { height: 36%; } }
@keyframes tn-assentar { from { transform: scale(1.113); } to { transform: scale(1.06); } }
@keyframes tn-acender { from { filter: brightness(.78) saturate(.9); } to { filter: none; } }
@keyframes tn-subir { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes tn-tracar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes tn-lustrar { from { opacity: 1; background-position: 200% 0; } to { opacity: 1; background-position: -120% 0; } }

.tn-toque { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; align-content: center; gap: 14px; background: #000; transition: opacity 400ms ease; pointer-events: none; opacity: 0; }
.tn-toque.on { opacity: 1; }
.tn-toque span { font-size: 8px; letter-spacing: 0.3em; color: rgba(255,255,255,.7); text-transform: uppercase; }
.tn-ondas { position: relative; width: 70px; height: 70px; }
.tn-ondas i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.6); animation: onda 1.4s var(--ease-out) infinite; }
.tn-ondas i:nth-child(2) { animation-delay: .45s; }
.tn-ondas b { position: absolute; left: 50%; top: 50%; width: 30px; height: 20px; margin: -10px 0 0 -15px; border-radius: 3px; border: 1px solid #fff; }
@keyframes onda { from { transform: scale(0.4); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }

.t-nut { background: #fbf9f7; color: #2b2420; font-family: 'Poppins', system-ui, sans-serif; }
.t-nut .cel-status { color: #2b2420; }
.tu-corpo { padding: 46px 16px 16px; display: grid; gap: 0; }
.tu-topo { display: grid; grid-template-columns: 14px auto 1fr auto; align-items: center; gap: 8px; }
.tu-topo svg.volta { width: 10px; height: 14px; }
.tu-mono { width: 24px; height: 16px; }
.tu-nome { display: grid; line-height: 1.15; }
.tu-nome b { font: 400 13px/1.1 'Italiana', serif; letter-spacing: 0.16em; }
.tu-nome small { font-size: 6.5px; font-weight: 600; letter-spacing: 0.24em; color: #8a664a; }
.tu-salvo { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 999px; background: #e9ece3; color: #4f7a5c; font-size: 9.5px; font-weight: 500; transition: transform 300ms var(--ease-out), background-color 300ms ease; }
.tu-salvo svg { width: 9px; height: 9px; }
.tu-salvo.pisca { transform: scale(1.08); background: #dfe8d9; }
.tu-trilhos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-top: 12px; }
.tu-trilhos i { height: 3px; border-radius: 2px; background: #ebe4da; transition: background-color 400ms ease; }
.tu-trilhos i.feito { background: #544339; }
.tu-trilhos i.agora { background: #b0896c; }
.tu-conta { display: flex; justify-content: space-between; margin-top: 7px; padding-bottom: 10px; border-bottom: 1px solid #e6dfd6; font-size: 8.5px; }
.tu-conta span:first-child { font-weight: 600; letter-spacing: 0.24em; color: #8a664a; }
.tu-conta span:last-child { color: #6f6259; } .tu-conta b { color: #2b2420; font-weight: 500; }
.tu-etq { margin-top: 16px; font-size: 8.5px; font-weight: 600; letter-spacing: 0.24em; color: #8a664a; }
.tu-tit { margin-top: 6px; font: 400 30px/1.05 'Italiana', serif; color: #2b2420; }
.tu-filete { width: 34px; height: 1px; background: #b0896c; margin: 12px 0 10px; }
.tu-ajuda { font-size: 11px; font-weight: 300; color: #6f6259; line-height: 1.55; }
.tu-perg { margin-top: 14px; font-size: 12.5px; font-weight: 500; line-height: 1.35; }
.tu-chips { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 6px; }
.tu-chip { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border-radius: 999px; background: #f3eee6; color: #2b2420; font-size: 10.5px; transition: background-color 260ms ease, color 260ms ease, transform 260ms var(--ease-out); }
.tu-chip svg { width: 9px; height: 9px; display: none; }
.tu-chip.marcado { background: #544339; color: #fbf9f7; }
.tu-chip.marcado svg { display: inline; }
.tu-chip.toca { transform: scale(0.94); }
.tu-bt { margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; height: 42px; border-radius: 12px; background: #544339; color: #fbf9f7; font-size: 12.5px; font-weight: 500; box-shadow: 0 8px 20px rgb(84 67 57 / 22%); }
.tu-nota { margin-top: 8px; text-align: center; font-size: 8.5px; color: #6f6259; }

.tab { padding: 11px; border-radius: 26px; background: #0b1220; box-shadow: var(--sombra), inset 0 0 0 2px #2a3245; min-width: 0; }
.tab-tela { border-radius: 15px; overflow: hidden; container-type: inline-size; position: relative; }

.t-pdv { background: #fafafa; color: #18181b; font: 400 11.5px/1.4 'Inter', system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.pd-app { display: grid; grid-template-columns: 40px minmax(0, 1fr) 210px; min-height: 360px; }
.pd-trilho { background: #f4f4f5; border-right: 1px solid #e4e4e7; display: grid; align-content: start; justify-items: center; gap: 10px; padding: 9px 0; }
.pd-logo { width: 26px; height: 26px; border-radius: 7px; background: #16130f; color: #D0AE6E; display: grid; place-items: center; overflow: hidden; }
.pd-logo img { width: 18px; height: 18px; object-fit: contain; }
.pd-trilho i { width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid #a1a1aa; opacity: 0.6; }
.pd-trilho i.on { background: #fff; border-color: #18181b; opacity: 1; box-shadow: 0 1px 2px rgb(0 0 0 / 8%); }
.pd-vitrine { padding: 10px; display: grid; gap: 7px; align-content: start; min-width: 0; }
.pd-busca { display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 9px; border-radius: 9px; border: 1.5px solid #2563eb; background: #fff; color: #71717a; font-size: 10.5px; white-space: nowrap; overflow: hidden; }
.pd-busca svg { width: 11px; height: 11px; flex: none; }
.pd-busca span { flex: 1; overflow: hidden; text-overflow: ellipsis; }
kbd { font: 600 8.5px/1 'Inter', sans-serif; padding: 3px 4px; border-radius: 4px; border: 1px solid #e4e4e7; background: #fafafa; color: #52525b; }
.pd-filtros { display: flex; flex-wrap: wrap; gap: 4px; }
.pd-filtros i { font-style: normal; font-size: 9.5px; font-weight: 600; padding: 3px 8px; border-radius: 999px; border: 1px solid #e4e4e7; background: #fff; color: #18181b; white-space: nowrap; }
.pd-filtros i b { color: #71717a; font-weight: 500; }
.pd-conta { font-size: 9.5px; color: #52525b; } .pd-conta b { color: #18181b; }
.pd-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pd-card { position: relative; background: #fff; border: 1px solid #e4e4e7; border-radius: 9px; padding: 5px 6px 6px; display: grid; gap: 1px; transition: transform 160ms var(--ease-out), box-shadow 160ms ease; }
.pd-card.toca { transform: scale(0.95); box-shadow: 0 0 0 2px #18181b inset; }
.pd-foto { height: 44px; display: grid; place-items: center; margin-bottom: 3px; }
.pd-foto svg { height: 42px; width: auto; }
.pd-un { position: absolute; left: 5px; top: 5px; font-style: normal; font-size: 8px; font-weight: 600; padding: 1px 5px; border-radius: 999px; background: #f4f4f5; color: #3f3f46; }
.pd-un.ult { background: #fef3c7; color: #92400e; }
.pd-qtd { position: absolute; right: 5px; top: 5px; width: 15px; height: 15px; border-radius: 50%; background: #18181b; color: #fff; font-size: 8.5px; display: grid; place-items: center; transition: transform 300ms var(--mola), opacity 200ms ease; }
.anim .pd-qtd:not(.on) { transform: scale(0); opacity: 0; }
.pd-card span.pd-nome { font-size: 9.5px; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-card small { font-size: 8.5px; color: #71717a; }
.pd-card strong { font-size: 10px; font-weight: 700; }
.pd-sacola { border-left: 1px solid #e4e4e7; background: #fff; padding: 10px 10px 10px; display: grid; gap: 7px; align-content: start; }
.pd-sac-cab { display: flex; align-items: baseline; gap: 5px; }
.pd-sac-cab > b { font-size: 13px; font-weight: 700; letter-spacing: -0.01em; }
.pd-sac-cab span { font-size: 10px; color: #71717a; }
.pd-cli { display: flex; align-items: center; gap: 7px; padding: 6px 7px; border-radius: 9px; background: #eff4ff; border: 1px solid #c7d7fe; }
.pd-ini { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 1px solid #c7d7fe; display: grid; place-items: center; font-size: 8.5px; font-weight: 700; color: #1d4ed8; flex: none; }
.pd-cli div { display: grid; line-height: 1.25; min-width: 0; }
.pd-cli b { font-size: 10px; } .pd-cli small { font-size: 8.5px; color: #52525b; }
.pd-seg { display: grid; grid-template-columns: 1fr 1fr; padding: 2px; border-radius: 8px; background: #f4f4f5; }
.pd-seg i { font-style: normal; text-align: center; font-size: 9px; font-weight: 600; padding: 4px 2px; border-radius: 6px; color: #52525b; white-space: nowrap; }
.pd-seg i.on { background: #fff; color: #18181b; box-shadow: 0 1px 2px rgb(0 0 0 / 8%); }
.pd-rot { font-size: 7.5px; font-weight: 700; letter-spacing: 0.08em; color: #71717a; margin-bottom: -3px; }
.pd-origem { display: flex; gap: 3px; flex-wrap: wrap; }
.pd-origem i { font-style: normal; font-size: 8.5px; font-weight: 600; padding: 3px 7px; border-radius: 999px; border: 1px solid #e4e4e7; color: #3f3f46; white-space: nowrap; }
.pd-origem i.on { border-color: #2563eb; color: #1d4ed8; background: #eff4ff; box-shadow: 0 0 0 1px #2563eb inset; }
.pd-itens { display: grid; gap: 5px; border-top: 1px solid #e4e4e7; padding-top: 7px; min-height: 104px; align-content: start; }
.pd-item { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.pd-mini { width: 20px; height: 22px; border-radius: 4px; border: 1px solid #e4e4e7; display: grid; place-items: center; }
.pd-mini svg { height: 16px; width: auto; }
.pd-item div { display: grid; line-height: 1.2; min-width: 0; }
.pd-item b { display: block; font-size: 9.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-item small { display: block; font-size: 8px; color: #71717a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-item strong { font-size: 9.5px; font-weight: 700; white-space: nowrap; }
.anim .pd-item.peca:not(.on) { transform: translateX(-14px); }
.pd-resumo { display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; border-top: 1px solid #e4e4e7; padding-top: 7px; font-size: 9.5px; color: #3f3f46; }
.pd-resumo b { font-weight: 600; color: #18181b; text-align: right; white-space: nowrap; }
.pd-resumo .tot { font-size: 12px; font-weight: 700; color: #18181b; }
.pd-fechar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border-radius: 9px; background: #18181b; color: #fff; font-size: 10.5px; font-weight: 600; transition: transform 200ms var(--ease-out), box-shadow 300ms ease; }
.pd-fechar kbd { background: #27272a; border-color: #3f3f46; color: #d4d4d8; }
.pd-fechar b { margin-left: auto; font-size: 12px; white-space: nowrap; }
.pd-fechar.pronto { box-shadow: 0 0 0 3px rgb(37 99 235 / 28%); }
@container (max-width: 540px) {
  .pd-app { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .pd-grade .pd-card:nth-child(n+4) { display: none; }
  .pd-itens { min-height: 0; }
  .pd-trilho, .pd-filtros, .pd-conta { display: none; }
  .pd-vitrine { padding-bottom: 4px; }
  .pd-sacola { border-left: 0; border-top: 1px solid #e4e4e7; }
  .pd-seg, .pd-rot, .pd-origem { display: none; }
}

.t-var { background: radial-gradient(70% 60% at 85% 0%, #DCEBFB, transparent 70%), #F3F7FB; color: #14245C; font: 400 11px/1.35 'Inter', system-ui, sans-serif; font-variant-numeric: tabular-nums; padding-bottom: 8px; }
.vz-topo { display: flex; align-items: center; gap: 9px; padding: 8px 12px; }
.vz-loja { display: inline-flex; align-items: center; gap: 6px; font-size: 7.5px; font-weight: 700; letter-spacing: 0.12em; color: #5D6F97; white-space: nowrap; }
.vz-loja i { width: 16px; height: 16px; border-radius: 5px; background: linear-gradient(180deg, #3A9CFF, #1665D2); }
.vz-topo > b { font-size: 12.5px; font-weight: 700; letter-spacing: -0.01em; padding-left: 9px; border-left: 1px solid #B8CCE4; white-space: nowrap; }
.vz-dt { font-size: 9.5px; color: #5D6F97; white-space: nowrap; }
.vz-sair { margin-left: auto; font-size: 9px; font-weight: 650; color: #1565C9; padding: 4px 8px; border-radius: 9px; background: #fff; box-shadow: 0 1px 2px rgba(20,36,92,.05), 0 8px 18px -12px rgba(20,36,92,.3); white-space: nowrap; }
.vz-quadro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 0 8px; }
.vz-col { background: rgba(255,255,255,.58); border: 1px solid rgba(255,255,255,.9); border-radius: 15px; padding: 8px; display: grid; gap: 6px; align-content: start; min-width: 0; }
.vz-sh { display: flex; align-items: center; gap: 6px; }
.vz-sh h5 { margin: 0; font-size: 12.5px; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; }
.vz-sh .vz-n { font-size: 8.5px; font-weight: 700; color: #1565C9; background: #E3EEFC; padding: 0 6px; border-radius: 999px; }
.vz-med { margin-left: auto; display: inline-flex; gap: 2px; }
.vz-med i { width: 11px; height: 3px; border-radius: 2px; background: #D8E6F4; transition: background-color 300ms ease; }
.vz-med i.on { background: #2492FF; }
.vz-mt { font-size: 8.5px; font-weight: 600; color: #5D6F97; }
.vz-sts { font-size: 8.5px; color: #5D6F97; margin-top: -4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vz-lista { display: grid; gap: 5px; align-content: start; }
.vz-fila { min-height: calc(4 * 38px + 3 * 5px); }
.vz-card { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 8px; background: rgba(255,255,255,.97); border: 1px solid #E4ECF6; border-radius: 11px; padding: 0 6px 0 0; min-height: 38px; overflow: hidden; box-shadow: 0 1px 2px rgba(20,36,92,.05), 0 8px 18px -14px rgba(20,36,92,.3); will-change: transform; }
.vz-card.vez { border-color: #9cc8f7; box-shadow: 0 0 0 1px #9cc8f7, 0 8px 18px -14px rgba(20,36,92,.3); }
.vz-pos { align-self: stretch; display: grid; place-content: center; justify-items: center; background: linear-gradient(180deg, var(--pb), color-mix(in srgb, var(--pb) 80%, var(--fo))); color: #14245C; }
.vz-pos b { font-size: 14px; font-weight: 700; line-height: 1; }
.vz-pos small { font-size: 6.5px; font-weight: 800; letter-spacing: 0.06em; margin-top: 2px; display: none; }
.vz-card.vez .vz-pos small { display: block; }
.vz-pos svg { display: none; width: 12px; height: 12px; }
.vz-q { display: grid; line-height: 1.25; min-width: 0; }
.vz-q b { font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vz-q small { font-size: 8.5px; color: #5D6F97; white-space: nowrap; }
.vz-q small.at { display: none; }
.vz-acao { display: flex; align-items: center; gap: 4px; }
.vz-ini { display: inline-flex; align-items: center; gap: 4px; font-size: 9px; font-weight: 650; color: #fff; padding: 5px 10px; border-radius: 8px; background: linear-gradient(180deg, #1872DD, #125BC0); box-shadow: 0 6px 14px -8px rgba(22,103,211,.7); transition: transform 160ms var(--ease-out); white-space: nowrap; }
.vz-ini.toca, .vz-enc.toca { transform: scale(0.92); }
.vz-mais { font-size: 10px; font-weight: 800; color: #14245C; padding: 3px 6px; border-radius: 7px; border: 1px solid #E4ECF6; background: #fff; letter-spacing: 1px; }
.vz-tempo, .vz-enc { display: none; }
.vz-card.at .vz-pos b, .vz-card.at .vz-pos small, .vz-card.at .vz-ini, .vz-card.at .vz-mais, .vz-card.at .vz-q small.na-fila { display: none; }
.vz-card.at .vz-pos svg, .vz-card.at .vz-q small.at { display: block; }
.vz-card.at .vz-tempo { display: grid; justify-items: end; line-height: 1.1; }
.vz-card.at .vz-enc { display: inline-flex; }
.vz-tempo b { font-size: 13px; font-weight: 700; color: #22A45D; }
.vz-tempo small { font-size: 6.5px; font-weight: 800; letter-spacing: 0.06em; color: #127A40; }
.vz-enc { align-items: center; gap: 4px; font-size: 9px; font-weight: 650; color: #B42634; padding: 5px 9px; border-radius: 8px; background: #FDECEE; border: 1px solid #F4BCC2; transition: transform 160ms var(--ease-out); white-space: nowrap; }
.vz-enc::before { content: ""; width: 6px; height: 6px; border-radius: 1.5px; background: #EE5A66; }
.vz-vaga { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 9px; border-radius: 11px; border: 1px solid #E4ECF6; background: rgba(255,255,255,.7); font-size: 9px; color: #5D6F97; white-space: nowrap; overflow: hidden; }
.vz-vaga b { color: #14245C; font-weight: 650; }
.vz-vaga i { width: 16px; height: 16px; border-radius: 50%; background: #EEF3FA; flex: none; }
.vz-fora { margin: 8px 8px 0; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; background: rgba(255,255,255,.58); border: 1px solid rgba(255,255,255,.9); border-radius: 15px; padding: 7px 9px; }
.vz-fora-t { display: grid; line-height: 1.2; margin-right: 4px; }
.vz-fora-t b { font-size: 10.5px; } .vz-fora-t small { font-size: 8px; color: #5D6F97; }
.vz-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 3px; border-radius: 10px; background: #fff; border: 1px solid #E4ECF6; font-size: 9.5px; font-weight: 650; white-space: nowrap; }
.vz-chip i { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 8.5px; background: var(--pb); color: #14245C; }
.vz-chip small { font-size: 7.5px; color: #8A4F00; font-weight: 650; }
.vz-bt { margin-left: auto; font-size: 9px; font-weight: 650; color: #fff; padding: 6px 10px; border-radius: 9px; background: linear-gradient(180deg, #3A9CFF, #1665D2); white-space: nowrap; }
@container (max-width: 470px) {
  .vz-quadro { grid-template-columns: minmax(0, 1fr); }
  .vz-dt, .vz-sair, .vz-sts { display: none; }
  .vz-fila .vz-card:nth-child(n+4) { display: none; }
  .vz-atend .vz-vaga ~ .vz-vaga { display: none; }
  .vz-fora .vz-chip ~ .vz-chip, .vz-fora-t small { display: none; }
  .vz-fila { min-height: calc(3 * 38px + 2 * 5px); }
  
  .vz-atend { min-height: calc(3 * 38px + 2 * 5px); }
}

.t-crm { background: #f4f6fb; color: #0b1220; font: 400 11px/1.4 'Plus Jakarta Sans', system-ui, sans-serif; }
.cr-app { display: grid; grid-template-columns: 38px 190px minmax(0, 1fr); height: 350px; }
.cr-lado { background: #070d2e; display: grid; align-content: start; justify-items: center; gap: 11px; padding: 10px 0; }
.cr-lado b { width: 20px; height: 20px; border-radius: 50%; background: var(--horizonte); }
.cr-lado i { width: 17px; height: 17px; border-radius: 5px; background: rgb(255 255 255 / 14%); }
.cr-lado i.on { background: #2dccc7; }
.cr-lista { background: #fff; border-right: 1px solid #e2e7f0; display: grid; align-content: start; }
.cr-cab { padding: 10px 11px 6px; font: 600 12.5px/1.2 var(--f-tit); }
.cr-abas { display: flex; gap: 2px; padding: 0 8px; border-bottom: 1px solid #e2e7f0; }
.cr-abas i { font-style: normal; font-size: 9.5px; font-weight: 600; color: #5b6880; padding: 6px 6px 7px; border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: 4px; }
.cr-abas i.on { color: #0152ba; border-bottom-color: #0152ba; }
.cr-abas i b { font-size: 8px; color: #fff; background: #0152ba; border-radius: 999px; padding: 1px 5px; }
.cr-filtro { display: flex; gap: 4px; padding: 7px 8px; }
.cr-filtro i { font-style: normal; font-size: 8.5px; font-weight: 600; color: #475569; border: 1px solid #e2e7f0; border-radius: 999px; padding: 2px 7px; }
.cr-convs { display: grid; }
.cr-conv { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 7px; align-items: center; padding: 7px 9px; border-top: 1px solid #eef1f6; }
.cr-conv.sel { background: #eef4ff; box-shadow: inset 3px 0 0 #0152ba; }
.cr-av { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 8.5px; font-weight: 700; color: #0836b1; background: var(--c, #e6efff); flex: none; }
.cr-conv div { display: grid; line-height: 1.25; min-width: 0; }
.cr-conv b { font-size: 10px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-conv small { font-size: 8.5px; color: #5b6880; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-conv em { font-style: normal; display: grid; justify-items: end; gap: 2px; font-size: 8px; color: #5b6880; }
.cr-conv em i { font-style: normal; min-width: 14px; height: 14px; border-radius: 999px; background: #22a06b; color: #fff; font-size: 8px; font-weight: 700; display: grid; place-items: center; }
.cr-conv .etq { justify-self: start; font-size: 7.5px; font-weight: 700; color: #0e7490; background: #ecfeff; border-radius: 4px; padding: 0 4px; margin-top: 1px; }
.cr-chat { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; min-height: 0; background: #f4f6fb; }
.cr-chat-cab { display: flex; align-items: center; gap: 8px; padding: 8px 11px; background: #fff; border-bottom: 1px solid #e2e7f0; }
.cr-chat-cab div { display: grid; line-height: 1.25; min-width: 0; }
.cr-chat-cab b { font-size: 11px; } .cr-chat-cab small { font-size: 8.5px; color: #5b6880; white-space: nowrap; }
.cr-chat-cab .ia { margin-left: auto; font-size: 8.5px; font-weight: 700; color: #0152ba; background: #eef4ff; border: 1px solid #cddcf7; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.cr-msgs { display: grid; gap: 6px; align-content: end; padding: 11px; overflow: hidden; }
.anim .cr-msgs .peca:not(.on) { display: none; }
.cr-msgs .peca.on { animation: entra 380ms var(--ease-out); }
@keyframes entra { from { opacity: 0; transform: translateY(6px); } }
.cr-b { max-width: 82%; padding: 6px 9px; border-radius: 11px 11px 11px 3px; background: #fff; border: 1px solid #e2e7f0; font-size: 10px; line-height: 1.4; }
.cr-b.ia { justify-self: end; border-radius: 11px 11px 3px 11px; background: #e3eefc; border-color: #cddcf7; }
.cr-b.ia i { display: block; font-style: normal; font-size: 7.5px; font-weight: 800; letter-spacing: 0.06em; color: #0152ba; margin-bottom: 1px; }
.cr-b small { display: block; font-size: 7.5px; color: #5b6880; text-align: right; margin-top: 2px; }
.cr-digita { justify-self: end; display: none; gap: 3px; padding: 7px 9px; border-radius: 11px; background: #e3eefc; }
.cr-digita.on { display: inline-flex; }
.cr-digita i { width: 5px; height: 5px; border-radius: 50%; background: #0152ba; opacity: 0.4; animation: digita 900ms infinite; }
.cr-digita i:nth-child(2) { animation-delay: 150ms; } .cr-digita i:nth-child(3) { animation-delay: 300ms; }
@keyframes digita { 30% { opacity: 1; transform: translateY(-2px); } }
.cr-ev { justify-self: center; font-size: 8.5px; font-weight: 600; color: #0e7490; background: #ecfeff; border: 1px solid #bae6f0; border-radius: 999px; padding: 3px 10px; }
.cr-pe { display: flex; align-items: center; gap: 8px; padding: 8px 11px; background: #fff; border-top: 1px solid #e2e7f0; font-size: 9px; color: #475569; }
.cr-pe b { margin-left: auto; font-size: 9.5px; color: #fff; background: linear-gradient(135deg, #0a3fb8, #0178c7); padding: 5px 11px; border-radius: 8px; white-space: nowrap; }
@container (max-width: 500px) {
  .cr-app { height: 420px; }
  .cr-app { grid-template-columns: minmax(0, 1fr); }
  .cr-lado, .cr-lista { display: none; }
}

.t-fis { background: #f7f8fb; color: #0f172a; font: 400 11px/1.35 'Inter', system-ui, sans-serif; }
.fi-app { display: grid; grid-template-columns: 112px minmax(0, 1fr); min-height: 360px; }
.fi-lado { background: #fff; border-right: 1px solid #eaecef; padding: 10px 8px; display: grid; align-content: start; gap: 2px; }
.fi-est { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.fi-est > span { width: 22px; height: 22px; border-radius: 50%; background: #e6f1ee; color: #1f6a5e; font: 600 10px/1 'Cormorant Garamond', serif; display: grid; place-items: center; flex: none; }
.fi-est div { display: grid; line-height: 1.2; min-width: 0; }
.fi-est b { font-size: 9.5px; white-space: nowrap; } .fi-est small { font-size: 7.5px; color: #5f6c82; }
.fi-lado small.g { font-size: 7px; font-weight: 700; letter-spacing: 0.1em; color: #5f6c82; margin: 6px 0 1px; }
.fi-lado span.it { font-size: 9.5px; color: #475569; padding: 4px 6px; border-radius: 7px; white-space: nowrap; }
.fi-lado span.it.on { background: #e6f1ee; color: #1f6a5e; font-weight: 600; }
.fi-main { padding: 0 12px 12px; min-width: 0; display: grid; gap: 8px; align-content: start; }
.fi-abas { display: flex; gap: 12px; border-bottom: 1px solid #eaecef; }
.fi-abas i { font-style: normal; font-size: 9.5px; font-weight: 600; color: #475569; padding: 8px 0 7px; border-bottom: 2px solid transparent; white-space: nowrap; }
.fi-abas i.on { color: #1f6a5e; border-bottom-color: #287e70; }
.fi-tit { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fi-tit div { display: grid; line-height: 1.2; margin-right: auto; }
.fi-tit div > b { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; }
.fi-tit div small { font-size: 9.5px; color: #475569; } .fi-tit div small b { color: #0f172a; }
.fi-segm { display: inline-flex; padding: 2px; border-radius: 8px; background: #eef0f4; }
.fi-segm i { font-style: normal; font-size: 9px; font-weight: 600; color: #475569; padding: 3px 8px; border-radius: 6px; }
.fi-segm i.on { background: #fff; color: #0f172a; box-shadow: 0 1px 2px rgb(15 23 42 / 8%); }
.fi-novo { font-size: 9.5px; font-weight: 600; color: #fff; background: #287e70; padding: 5px 10px; border-radius: 8px; white-space: nowrap; }
.fi-grade { display: grid; grid-template-columns: 38px repeat(4, minmax(0, 1fr)); background: #fff; border: 1px solid #eaecef; border-radius: 11px; overflow: hidden; }
.fi-grade > .d { padding: 6px 7px; border-bottom: 1px solid #eaecef; border-left: 1px solid #eaecef; display: grid; line-height: 1.2; }
.fi-grade > .d b { font-size: 9px; font-weight: 700; letter-spacing: 0.02em; }
.fi-grade > .d small { font-size: 8px; color: #5f6c82; }
.fi-grade > .d.hoje b, .fi-grade > .d.hoje small { color: #1f6a5e; }
.fi-grade > .h { font: 500 8.5px/1 ui-monospace, 'Cascadia Mono', Consolas, monospace; color: #475569; padding: 7px 4px; border-bottom: 1px solid #f1f2f5; }
.fi-grade > .c { border-left: 1px solid #eaecef; border-bottom: 1px solid #f1f2f5; padding: 3px; min-height: 58px; }
.fi-grade > .c.zz { background: repeating-linear-gradient(135deg, #f7f8fb 0 6px, #fff 6px 12px); display: grid; place-items: center; font-size: 8px; color: #5f6c82; }
.fi-cx { border-radius: 7px; border: 1px solid #cfe3dd; border-left: 3px solid #287e70; background: #f6fbfa; padding: 4px 5px; display: grid; gap: 1px; height: 100%; }
.fi-cx.indiv { border-color: #e2e8f0; border-left-color: #64748b; background: #fff; }
.fi-cx .hh { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1px 4px; font: 500 8px/1.2 ui-monospace, 'Cascadia Mono', Consolas, monospace; color: #475569; }
.fi-cx .hh em { font: 700 7.5px/1.2 'Inter', sans-serif; font-style: normal; color: #b45309; white-space: nowrap; }
.fi-cx .hh em.dois { color: #475569; }
.fi-cx .hh em.sala { color: #1d4ed8; background: #eef2ff; padding: 0 4px; border-radius: 3px; }
.fi-cx > span:not(.hh) { font-size: 8.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 4px; }
.fi-cx > span:not(.hh)::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: #287e70; flex: none; }
.fi-cx > span.vaga { color: #287e70; font-weight: 600; transition: color 300ms ease, background-color 300ms ease; border-radius: 3px; }
.fi-cx > span.vaga::before { background: transparent; box-shadow: inset 0 0 0 1px #287e70; }
.fi-cx > span.entrou { background: #e6f1ee; color: #0f172a; font-weight: 600; }
.fi-cx > b { font-size: 9px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fi-cx > small { font-size: 7.5px; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@container (max-width: 500px) {
  .fi-app { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .fi-lado { display: none; }
  .fi-abas i:nth-child(n+3), .fi-segm { display: none; }
  .fi-grade { grid-template-columns: 34px repeat(3, minmax(0, 1fr)); }
  .fi-grade > .col4 { display: none !important; }
}

.t-loja { background: #FFFDF9; color: #241E17; font-family: 'Manrope', system-ui, sans-serif; }
.t-loja .cel-status { color: #F4E6C8; transition: color 400ms ease; }
.t-loja.rolou .cel-status { color: #241E17; }
.lj-pagina { position: absolute; inset: 0; transition: transform 1100ms var(--ease-out); }
.lj-pagina.rola { transform: translateY(-118px); }
.lj-aviso { position: relative; height: 66px; background: #211D18; }
.lj-aviso span { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font-size: 9.5px; font-weight: 500; color: #F4E6C8; opacity: 0; transform: translateY(6px); transition: opacity 400ms ease, transform 500ms var(--ease-out); }
.lj-aviso span.on { opacity: 1; transform: none; }
.lj-cab { display: grid; grid-template-columns: 26px 1fr 26px; align-items: center; padding: 8px 14px 8px; }
.lj-cab svg.menu { width: 20px; height: 14px; }
.lj-logo { justify-self: center; width: 92px; height: auto; display: block; }
.lj-car { justify-self: end; width: 21px; height: 19px; }
.lj-busca { margin: 0 12px 10px; height: 34px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; border: 1px solid #A8823A; font-size: 11.5px; color: #9b8f80; }
.lj-busca svg { width: 13px; height: 13px; }
.lj-linha { height: 1px; background: #E4D9C5; }
.lj-heroi { position: relative; height: 333px; background: #211D18; overflow: hidden; }
.lj-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 700ms ease; }
.lj-slide.on { opacity: 1; }
.lj-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lj-txt { position: absolute; left: 18px; right: 18px; bottom: 26px; display: grid; gap: 9px; justify-items: start; }
.lj-txt small { font: 700 7.5px/1.4 'Manrope', sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #D4B46B; }
.lj-txt b { font: 500 27px/1.05 'Cormorant Garamond', serif; letter-spacing: -.02em; color: #FAF7F0; }
.lj-txt b em { font-style: italic; font-weight: 400; color: #E0C795; }
.lj-bt { margin-top: 4px; font: 700 7.5px/1 'Manrope', sans-serif; letter-spacing: .13em; text-transform: uppercase; color: #211D18; background: #D4B46B; padding: 11px 16px; }
.lj-pontos { display: flex; justify-content: center; align-items: center; gap: 0; padding: 12px 0 10px; }
.lj-pontos i { width: 6px; height: 6px; border-radius: 50%; margin: 0 5px; background: #CEC3AF; transition: background-color 300ms ease; }
.lj-pontos i.on { background: #936D2A; }
.lj-pontos svg { width: 9px; height: 9px; margin-left: 12px; fill: #6C6255; }
.lj-sec { display: block; padding: 6px 14px 0; font: 500 18px/1.3 'Cormorant Garamond', serif; color: #241E17; }
.lj-fam { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 12px 12px 0; }
.lj-fam span { display: grid; justify-items: center; gap: 7px; font: 500 7px/1.2 'Manrope', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #241E17; }
.lj-fam span i { width: 52px; height: 52px; border-radius: 50%; background: var(--c); display: grid; place-items: center; }
.lj-fam span i img { width: 36px; height: 36px; object-fit: contain; }

@media (max-width: 1099px) {
  .trilho.familia { grid-template-columns: 300px minmax(0, 1fr); }
  .trilho.familia .caso:last-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .trilho { display: flex !important; align-items: flex-start; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * clamp(16px, 4vw, 48px)); padding: 4px clamp(16px, 4vw, 48px) 18px; scrollbar-width: none; }
  .trilho::-webkit-scrollbar { display: none; }
  .caso { flex: 0 0 auto; scroll-snap-align: center; }
  .caso.de-nav { width: min(86vw, 520px); }
  .caso.de-cel { width: 300px; }
  .caso.de-nav .tab { width: 100%; }
  .trilho.medida .caso { width: 300px; }
  .dica-arraste { display: block; font-size: 0.8125rem; color: var(--texto-3); margin-top: -8px; }
}
@media (prefers-reduced-motion: reduce) {
  .peca, .regua i, .barra-x, .traco, .ch-bar, .ps-c, .tu-chip, .tu-salvo, .tn-ondas i, .lj-pagina, .lj-slide { transition: none !important; animation: none !important; }
  .t-nfc.abre *, .t-nfc.abre .tn-faixa, .t-nfc.abre .tn-ida::before { animation: none !important; }
}

.cap { position: relative; overflow: hidden; isolation: isolate; padding: clamp(56px, 8vw, 104px) 0; }
.cap h2 { font-size: clamp(1.75rem, 3.6vw, 2.6rem); font-weight: 600; line-height: 1.08; }
.cap-texto { display: grid; gap: 14px; align-content: start; }
.cap-texto > p:not(.olho) { color: var(--texto-2); font-size: 1.0625rem; max-width: 52ch; }

.revela { transition: opacity 520ms var(--ease-out), transform 720ms var(--ease-out); }
.anim .revela:not(.on) { opacity: 0; transform: translateY(14px); }
.barra { transform-origin: left center; transition: transform 1100ms var(--ease-out); }
.anim .barra:not(.on) { transform: scaleX(0); }

.c-origem { background: var(--enchente); }
.c-origem .olho { color: #475569; }

.c-origem .cap-texto > p.o-sub { font: 500 clamp(1.1875rem, 2vw, 1.375rem)/1.4 var(--f-tit); color: var(--texto); letter-spacing: -0.01em; margin-top: -4px; text-wrap: balance; }
.o-grade { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.o-num { margin: 0; display: grid; gap: 0; border-top: 1px solid #d5dae2; }
.o-num div { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: baseline; gap: 16px; padding: 18px 0; border-bottom: 1px solid #d5dae2; }
.o-num dd { margin: 0; font: 700 clamp(2.4rem, 5vw, 3.6rem)/1 var(--f-txt); letter-spacing: -0.03em; color: #1e293b; white-space: nowrap; }
.o-num dt { font-size: 0.9375rem; color: #475569; line-height: 1.4; }
.o-dados { margin-top: clamp(32px, 5vw, 52px); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(20px, 3vw, 32px); }
.o-fig { margin: 0; background: rgb(255 255 255 / 62%); border: 1px solid #dde2ea; border-radius: 16px; padding: 18px 20px 20px; display: grid; gap: 14px; align-content: start; }
.o-fig figcaption { display: grid; gap: 2px; }
.o-fig figcaption b { font: 600 1rem/1.3 var(--f-tit); color: #1e293b; }
.o-fig figcaption span { font-size: 0.8125rem; color: #5b6880; }
.o-cat { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.o-cat li { display: grid; grid-template-columns: 9.5em minmax(0, 1fr) 3em; align-items: center; gap: 10px; font-size: 0.875rem; color: #334155; }
.o-cat li span { white-space: nowrap; }
.o-cat li i { display: block; height: 9px; border-radius: 5px; background: #e2e6ec; overflow: hidden; }
.o-cat li i b { display: block; height: 100%; width: calc(var(--v) / 295 * 100%); border-radius: 5px; background: #64748b; }
.o-cat li:first-child i b { background: #334155; }
.o-cat li em { font-style: normal; font-weight: 700; text-align: right; color: #1e293b; }
.o-urg { display: flex; height: 38px; border-radius: 10px; overflow: hidden; gap: 2px; }
.o-urg i { display: grid; place-items: center; font-style: normal; font-size: 0.8125rem; font-weight: 700; color: #fff; flex: var(--v) 0 0; transform-origin: left center; }
.o-urg i:nth-child(1) { background: #334155; } .o-urg i:nth-child(2) { background: #64748b; } .o-urg i:nth-child(3) { background: #cbd5e1; color: #1e293b; }
.o-leg { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 0.875rem; color: #334155; }
.o-leg li { display: flex; align-items: center; gap: 8px; }
.o-leg li::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.o-leg li b { margin-left: auto; color: #1e293b; }
.o-bairros { margin-top: 4px; padding-top: 12px; border-top: 1px solid #dde2ea; font-size: 0.9375rem; color: #334155; }
.o-tinha { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid #dde2ea; }
.o-tinha b { font: 600 0.9375rem/1.3 var(--f-tit); color: #1e293b; }
.o-tinha ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.o-tinha li { display: flex; gap: 8px; font-size: 0.875rem; color: #334155; line-height: 1.4; }
.o-tinha li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 0.5em; border-radius: 50%; background: #94a3b8; }
.c-origem .nota { margin-top: 24px; }
.c-origem .nota a { color: #334155; }

.c-cons { background: var(--branco); }
.k-grade { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.k-numero { display: grid; gap: 2px; margin-top: 6px; padding: 16px 18px; border-radius: 16px; background: var(--fundo); border: 1px solid var(--borda); max-width: 420px; }
.k-numero span { font-size: 0.9375rem; color: var(--texto-2); }
.k-numero b { font: 700 clamp(2.4rem, 5vw, 3.2rem)/1.05 var(--f-txt); letter-spacing: -0.03em; background: var(--horizonte); -webkit-background-clip: text; background-clip: text; color: transparent; }
.k-caso { font-size: 0.9375rem; color: var(--texto-2); border-left: 3px solid var(--ciano-2); padding-left: 12px; max-width: 46ch; }
.k-term { background: var(--navy); border-radius: 18px; box-shadow: var(--sombra); color: #c9d4f2; font: 400 12.5px/1.55 var(--f-mono); overflow: hidden; min-width: 0; }
.k-cab { display: flex; align-items: center; gap: 7px; padding: 11px 14px; border-bottom: 1px solid rgb(255 255 255 / 9%); font-family: var(--f-txt); font-size: 0.8125rem; color: #a9b6dc; }
.k-cab > i { width: 9px; height: 9px; border-radius: 50%; background: rgb(255 255 255 / 16%); }
.k-cab b { margin-left: 6px; font-weight: 600; color: #e6ecff; }
.k-cab em { margin-left: auto; font-style: normal; font-size: 0.75rem; font-weight: 700; color: var(--ciano); display: inline-flex; align-items: center; gap: 6px; }
.k-cab em::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ciano); animation: pisca 1.2s ease-in-out infinite; }
@keyframes pisca { 50% { opacity: 0.3; } }
.k-suites { display: grid; gap: 7px; padding: 14px 16px 12px; border-bottom: 1px solid rgb(255 255 255 / 9%); font-family: var(--f-txt); }
.k-suite { display: grid; grid-template-columns: 9.5em minmax(0, 1fr) 4.5em; align-items: center; gap: 10px; font-size: 0.8125rem; color: #c9d4f2; }
.k-suite i { height: 6px; border-radius: 3px; background: rgb(255 255 255 / 10%); overflow: hidden; }
.k-suite i b { display: block; height: 100%; width: 100%; border-radius: 3px; background: linear-gradient(90deg, #0178c7, #2dccc7); transform-origin: left center; transition: transform 900ms var(--ease-out); }
.anim .k-suite i b:not(.on) { transform: scaleX(0); }
.k-suite em { font-style: normal; font-weight: 700; text-align: right; color: #e6ecff; }
.k-janela { height: 236px; overflow: hidden; padding: 6px 0; position: relative; }
.k-janela::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 26px; background: linear-gradient(var(--navy), transparent); pointer-events: none; }
.k-linhas { list-style: none; margin: 0; padding: 0 16px; display: grid; gap: 3px; transition: transform 420ms var(--ease-out); }
.k-linhas li { display: grid; grid-template-columns: 1.3em minmax(0, 1fr) auto; gap: 6px; align-items: baseline; }
.k-linhas li .ok { color: var(--ciano); font-weight: 700; }
.k-linhas li small { color: #6f7ea8; font-size: 11px; }
.anim .k-linhas li:not(.on) { opacity: 0; }
.k-linhas li.on { animation: entra 300ms var(--ease-out); }
.k-pe { display: flex; align-items: center; gap: 8px; padding: 11px 16px; border-top: 1px solid rgb(255 255 255 / 9%); font-family: var(--f-txt); font-size: 0.8125rem; color: #a9b6dc; }
.k-pe b { color: var(--ciano); font-weight: 700; }
.k-ia { margin-top: clamp(36px, 5vw, 56px); padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid var(--borda); display: grid; gap: 22px; }
.k-ia h3 { font-size: clamp(1.375rem, 2.6vw, 1.875rem); font-weight: 600; line-height: 1.15; max-width: 30ch; }
.k-ia-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.k-ia-grade > div { display: grid; gap: 8px; align-content: start; padding: 18px; border-radius: 16px; background: var(--fundo); border: 1px solid var(--borda); }
.k-ia-grade svg { width: 30px; height: 30px; }
.k-ia-grade b { font: 600 1.0625rem/1.3 var(--f-tit); }
.k-ia-grade p { font-size: 0.9375rem; color: var(--texto-2); }

.c-portas { background: var(--fundo); }
.c-portas .cap-texto { max-width: 640px; }
.portas { margin-top: clamp(28px, 4vw, 40px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.porta { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 24px 22px 22px; border-radius: 18px; background: var(--branco); border: 1px solid var(--borda); box-shadow: 0 1px 2px rgb(11 18 32 / 4%); scroll-margin-top: 16px; transition: transform 200ms var(--ease-out), box-shadow 200ms ease; }
@media (hover: hover) and (pointer: fine) { .porta:hover { transform: translateY(-3px); box-shadow: var(--sombra); } }
.porta::before { content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--horizonte); }
.p-cab { display: flex; align-items: center; gap: 10px; }
.p-ic { width: 40px; height: 40px; border-radius: 12px; background: #eef4ff; display: grid; place-items: center; flex: none; }
.p-ic svg { width: 22px; height: 22px; }
.porta-nome { font: 600 0.8125rem/1.3 var(--f-txt); letter-spacing: 0.08em; text-transform: uppercase; color: var(--acento); }
.porta h3 { font-size: 1.3125rem; font-weight: 600; line-height: 1.2; }
.porta p { font-size: 0.9375rem; color: var(--texto-2); }
.porta .p-entrega { color: var(--texto); }
.porta .prova { display: flex; gap: 8px; font-size: 0.875rem; color: var(--texto-2); padding-top: 12px; border-top: 1px solid var(--borda); }
.porta .prova svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.porta .btn { margin-top: auto; width: 100%; }
.porta .prova + .btn { margin-top: auto; }
.p-espaco { flex: 1; }
@media (min-width: 961px) { .porta .prova { min-height: calc(3 * 1.5em + 13px); } }

.c-assina { background: var(--branco); }
.a-grade { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.a-marca { display: grid; gap: 14px; align-content: start; }
.a-marca img { width: auto; height: 40px; }
.a-marca h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); }
.a-texto { display: grid; gap: 16px; }
.a-texto p { font-size: 1.125rem; line-height: 1.65; color: var(--texto-2); max-width: 54ch; }
.a-texto p:first-child { font-size: 1.25rem; color: var(--texto); }

.c-fecho { background: linear-gradient(180deg, var(--branco) 0%, var(--fundo) 100%); padding-bottom: clamp(28px, 4vw, 40px); }
.c-fecho::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--horizonte); }
.f-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.f-texto h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.f-texto .btn { justify-self: start; margin-top: 6px; }
.f-contatos { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.f-contatos a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: 0.9375rem; color: var(--texto-2); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .f-contatos a:hover { color: var(--link); text-decoration: underline; } }
.z { justify-self: center; width: min(100%, 400px); height: 360px; display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; box-shadow: var(--sombra); border: 1px solid #d9dee6; background: #efeae2; font-family: var(--f-txt); }
.z-cab { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #fff; border-bottom: 1px solid #e5e7eb; }

.z-av { width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 1px solid #e5e7eb; display: grid; place-items: center; flex: none; }
.z-av img { width: 26px; height: auto; }
.z-cab div { display: grid; line-height: 1.25; }
.z-cab b { font-size: 0.9375rem; color: #111b21; }
.z-cab small { font-size: 0.75rem; color: #667781; }
.z-corpo { position: relative; flex: 1; min-height: 0; overflow: hidden; padding: 14px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;
  background-image: radial-gradient(rgb(0 0 0 / 3.5%) 1px, transparent 1px); background-size: 14px 14px; }
.z-dia { align-self: center; font-size: 0.6875rem; font-weight: 600; color: #54656f; background: #fff; padding: 3px 10px; border-radius: 7px; box-shadow: 0 1px 1px rgb(0 0 0 / 6%); }
.z-msg { align-self: flex-end; max-width: 86%; background: #d9fdd3; color: #111b21; font-size: 0.875rem; line-height: 1.4; padding: 7px 9px 5px; border-radius: 9px 9px 2px 9px; box-shadow: 0 1px 1px rgb(0 0 0 / 8%); }
.z-msg small { display: flex; justify-content: flex-end; gap: 3px; align-items: center; font-size: 0.6875rem; color: #667781; margin-top: 2px; }
.z-msg small svg { width: 15px; height: 10px; }
.anim .z-msg:not(.on) { opacity: 0; transform: translateY(10px) scale(0.98); }
.z-msg { transition: opacity 320ms var(--ease-out), transform 480ms var(--ease-out); transform-origin: right bottom; }
.z-pe { display: flex; align-items: flex-end; gap: 8px; padding: 9px 10px; background: #f0f2f5; }
.z-campo { flex: 1; min-height: 40px; display: flex; align-items: center; padding: 8px 12px; border-radius: 20px; background: #fff; font-size: 0.875rem; line-height: 1.35; color: #111b21; }
.z-campo .vazio { color: #8696a0; }
.z-cursor { display: inline-block; width: 1.5px; height: 1.05em; background: #00a884; margin-left: 1px; vertical-align: -2px; animation: pisca 1s steps(2) infinite; }
.z-env { width: 40px; height: 40px; border-radius: 50%; background: #00a884; display: grid; place-items: center; flex: none; transition: transform 200ms var(--ease-out); }
.z-env svg { width: 18px; height: 18px; }
.z-env.toca { transform: scale(0.88); }
.z-dica { margin-top: 10px; text-align: center; font-size: 0.8125rem; color: var(--texto-3); }
.f-rodape { margin-top: clamp(40px, 6vw, 64px); padding-top: 18px; border-top: 1px solid var(--borda); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.f-rodape img { height: 44px; width: auto; }
.f-rodape span { font-size: 0.875rem; color: var(--texto-3); }

@media (max-width: 960px) {
  .o-grade, .o-dados, .k-grade, .a-grade, .f-grade { grid-template-columns: minmax(0, 1fr); }
  .portas { grid-template-columns: minmax(0, 1fr); }
  .k-ia-grade { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .o-num div { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 14px 0; }
  .o-cat li { grid-template-columns: 9.6em minmax(0, 1fr) 2.6em; font-size: 0.8125rem; gap: 8px; }
  .k-suite { grid-template-columns: 7.6em minmax(0, 1fr) 3.8em; font-size: 0.75rem; }
  .k-term { font-size: 11.5px; }
  .k-linhas { padding: 0 12px; }
  .k-linhas li { grid-template-columns: 1.2em minmax(0, 1fr); }
  .k-linhas li small { display: none; }
  .k-janela { height: 252px; }
  .f-texto .btn { width: 100%; justify-self: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  .revela, .barra, .k-suite i b, .k-linhas, .z-msg, .z-env, .porta { transition: none !important; }
  .k-cab em::before, .z-cursor, .k-linhas li.on { animation: none !important; }
}

.cap .btn { padding: 12px 22px; }

.o-num dd { order: -1; }

main > section:not(#abertura) { content-visibility: auto; contain-intrinsic-size: auto var(--reserva, 1200px); }

#origem { --reserva: 1900px; } #depois { --reserva: 2830px; } #construimos { --reserva: 1870px; }
#portas { --reserva: 1730px; } #assina { --reserva: 755px; } #fecho { --reserva: 996px; }
@media (min-width: 768px) {
  #origem { --reserva: 1645px; } #depois { --reserva: 3800px; } #construimos { --reserva: 1610px; }
  #portas { --reserva: 1340px; } #assina { --reserva: 565px; } #fecho { --reserva: 910px; }
}
@media (min-width: 1024px) {
  #origem { --reserva: 1088px; } #depois { --reserva: 3300px; } #construimos { --reserva: 1085px; }
  #portas { --reserva: 870px; } #assina { --reserva: 512px; } #fecho { --reserva: 655px; }
}

.priv h1 { font-size: clamp(1.75rem, 4vw, 2.4rem); font-weight: 600; line-height: 1.12; margin: 10px 0 18px; }
.priv .priv-marca { display: inline-block; margin-bottom: 40px; }
.priv .priv-marca img { display: block; width: 130px; height: auto; }

.priv p { max-width: 36em; color: var(--texto-2); font-size: 1.0625rem; }
.priv p + p { margin-top: 1em; }
.priv .olho { color: var(--acento); }
.priv .btn { margin-top: 8px; }