/* ============================================================
   REBRAND COMPLETO DA PÁGINA (10/10/2026) — dobras novas, prefixo .tbr
   Uma base só para todas: cabeçalho, cartão com interface desenhada em
   código (estilo Conty/Aeline) e o mascote do agente no canto.
   Moldura: só a TBF da casa. Cor: branco da casa, preto #1B1B1B; quem
   carrega a cor é o mascote (--tbr-cor em cada cartão).
   Leve: a interface é CSS; imagem só lazy.
   ============================================================ */

.tbr { padding: 0 20px; }

/* ---------- cabeçalho ---------- */
.tbr-cabeca { text-align: center; max-width: 880px; margin: 0 auto; padding: clamp(44px, 6vw, 76px) 20px clamp(34px, 5vw, 56px); }
.tbr-cabeca .tb-feature-pill { margin: 0 auto; }
.tbr-titulo {
  margin: 20px 0 0; font-size: clamp(32px, 4.4vw, 58px); line-height: 1.02; letter-spacing: -0.04em;
  font-weight: 800; color: #1B1B1B; text-wrap: balance;
}
.tbr-titulo em { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 400; letter-spacing: -0.02em; color: #B8956A; }
.tbr-sub { margin: 18px auto 0; max-width: 60ch; font-size: 17px; line-height: 1.55; color: #55504A; text-wrap: pretty; }

/* ---------- cartões ---------- */
.tbr-cards { display: grid; gap: 16px; align-items: start; padding: clamp(26px, 4vw, 42px) clamp(10px, 2vw, 22px); }
.tbr-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tbr-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tbr-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tbr-card {
  --tbr-cor: #B8956A;
  background: #fff; border: 1px solid #ebe9e4; border-radius: 18px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 24px 50px -30px rgba(20,24,40,.28);
  transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s cubic-bezier(.16,1,.3,1);
}
.tbr-card:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 34px 60px -30px rgba(20,24,40,.36); }
.tbr-visual {
  position: relative; height: 252px; border-radius: 17px 17px 0 0;
  background:
    radial-gradient(ellipse at 50% -10%, color-mix(in srgb, var(--tbr-cor) 20%, transparent), transparent 62%),
    radial-gradient(ellipse at 100% 110%, rgba(125,176,241,.20), transparent 55%),
    #F4F3F0;
  border-bottom: 1px solid #eeece7;
}
.tbr-texto { padding: 20px 20px 24px; }
.tbr-quem { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; letter-spacing: .02em; color: #6f6a62; }
.tbr-quem i { width: 8px; height: 8px; border-radius: 50%; background: var(--tbr-cor); }
.tbr-texto h3 { margin: 9px 0 0; font-size: 21px; line-height: 1.12; letter-spacing: -0.025em; font-weight: 800; color: #1B1B1B; }
.tbr-texto p { margin: 9px 0 0; font-size: 14.5px; line-height: 1.5; color: #5d5852; text-wrap: pretty; }

/* o mascote do agente, no canto do palco, um pouco para fora do cartão */
.tbr-masc { position: absolute; right: -10px; bottom: -14px; z-index: 3; }

/* ---------- peças da interface desenhada ---------- */
.tbr-l { display: block; height: 6px; border-radius: 99px; background: #e9e7e2; }
.tbr-b { display: block; border-radius: 6px; background: #e4e2dd; }
.tbr-tag {
  align-self: flex-start; padding: 3px 8px; border-radius: 99px; font-size: 10px; font-weight: 700; letter-spacing: .04em;
  background: color-mix(in srgb, var(--tbr-cor) 14%, #fff); color: color-mix(in srgb, var(--tbr-cor) 70%, #1B1B1B);
}
.tbr-ok { width: 16px; height: 16px; border-radius: 50%; background: #2FB36B; position: relative; flex: none; }
.tbr-ok::after { content: ""; position: absolute; left: 5.5px; top: 3px; width: 4px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(42deg); }

/* 01 · texto: o pedido e o documento que volta */
.tbr-v-texto { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 0 18px; }
.tbr-pedido {
  display: flex; align-items: center; gap: 8px; width: 100%; max-width: 232px; padding: 8px 8px 8px 14px; border-radius: 99px;
  background: #fff; border: 1px solid #e7e5e0; box-shadow: 0 10px 22px -14px rgba(20,24,40,.35);
  font-size: 12px; font-weight: 500; color: #3d3934; white-space: nowrap;
}
.tbr-pedido span { flex: 1; overflow: hidden; border-right: 2px solid #1B1B1B; width: 0; animation: tbrDigita 7s steps(30, end) infinite; }
.tbr-pedido i { flex: none; width: 24px; height: 24px; border-radius: 50%; background: #1B1B1B; color: #fff; font-style: normal; font-size: 13px; display: grid; place-items: center; }
@keyframes tbrDigita { 0% { width: 0; } 28%, 90% { width: 100%; } 100% { width: 0; } }
.tbr-doc {
  display: flex; flex-direction: column; gap: 7px; width: 100%; max-width: 232px; padding: 13px 14px 15px; border-radius: 13px;
  background: #fff; border: 1px solid #e7e5e0; box-shadow: 0 20px 36px -22px rgba(20,24,40,.42);
  transform: rotate(-1.6deg); animation: tbrChega 7s cubic-bezier(.16,1,.3,1) infinite;
}
.tbr-doc b { font-size: 13px; line-height: 1.25; letter-spacing: -0.01em; color: #1B1B1B; }
@keyframes tbrChega { 0%, 26% { opacity: 0; transform: translateY(14px) rotate(-1.6deg) scale(.96); } 36%, 92% { opacity: 1; transform: rotate(-1.6deg); } 100% { opacity: 0; transform: rotate(-1.6deg); } }

/* 02 · imagem e vídeo: três peças em leque, com a linha do scanner */
.tbr-v-midia { display: grid; place-items: center; perspective: 900px; overflow: hidden; }
.tbr-leque { position: relative; width: 190px; height: 178px; }
.tbr-leque img {
  position: absolute; top: 0; left: 50%; width: 100px; height: 172px; margin-left: -50px; object-fit: cover;
  border-radius: 12px; border: 3px solid #fff; box-shadow: 0 18px 30px -16px rgba(20,24,40,.5);
}
.tbr-leque img:nth-child(1) { transform: translateX(-56px) rotateY(24deg) rotate(-6deg) scale(.9); }
.tbr-leque img:nth-child(3) { transform: translateX(56px) rotateY(-24deg) rotate(6deg) scale(.9); }
.tbr-leque img:nth-child(2) { z-index: 2; }
.tbr-scan {
  position: absolute; z-index: 3; left: 50%; top: 4px; width: 106px; height: 2px; margin-left: -53px; border-radius: 2px;
  background: #fff; box-shadow: 0 0 12px 2px rgba(255,255,255,.9), 0 0 0 1px rgba(61,107,245,.35);
  animation: tbrScan 3.4s ease-in-out infinite;
}
@keyframes tbrScan { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(162px); } }
.tbr-etq {
  position: absolute; z-index: 4; padding: 5px 10px; border-radius: 99px; background: #1B1B1B; color: #fff;
  font-size: 11px; font-weight: 600; box-shadow: 0 10px 20px -10px rgba(0,0,0,.5);
}
.tbr-etq--a { left: 12px; top: 22px; }
.tbr-etq--b { left: 16px; bottom: 26px; background: #fff; color: #1B1B1B; border: 1px solid #e7e5e0; }

/* 03 · página: a janela do navegador, o botão e o selo "no ar" */
.tbr-v-pagina { display: grid; place-items: center; }
.tbr-nav {
  width: 78%; border-radius: 12px; background: #fff; border: 1px solid #e7e5e0; overflow: hidden;
  box-shadow: 0 22px 40px -22px rgba(20,24,40,.45); transform: perspective(900px) rotateY(-9deg) rotateX(4deg);
}
.tbr-nav-topo { display: flex; align-items: center; gap: 4px; padding: 7px 9px; background: #f3f2ef; border-bottom: 1px solid #ebe9e4; }
.tbr-nav-topo i { width: 6px; height: 6px; border-radius: 50%; background: #d5d2cc; }
.tbr-nav-topo span { flex: 1; height: 8px; margin-left: 6px; border-radius: 99px; background: #e4e2dd; }
.tbr-nav-corpo { display: flex; flex-direction: column; gap: 7px; padding: 14px 13px 13px; }
.tbr-b--cta { background: #1B1B1B; }
.tbr-nav-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 4px; }
.tbr-nav-grade i { height: 30px; border-radius: 6px; background: color-mix(in srgb, var(--tbr-cor) 16%, #f1efea); }
.tbr-publicar {
  position: absolute; left: 16px; bottom: 24px; padding: 8px 14px; border-radius: 99px; background: #1B1B1B; color: #fff;
  font-size: 12px; font-weight: 600; box-shadow: 0 12px 22px -10px rgba(0,0,0,.55); animation: tbrAperta 5s ease-in-out infinite;
}
.tbr-noar {
  position: absolute; left: 96px; bottom: 26px; padding: 6px 11px; border-radius: 99px; background: #E7F6EE; color: #1B7A47;
  font-size: 11.5px; font-weight: 700; border: 1px solid #c9ebd8; animation: tbrSelo 5s cubic-bezier(.34,1.56,.64,1) infinite;
}
@keyframes tbrAperta { 0%, 30%, 44%, 100% { transform: scale(1); } 37% { transform: scale(.92); } }
@keyframes tbrSelo { 0%, 40% { opacity: 0; transform: scale(.6); } 50%, 94% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }

/* 04 · campanha: o cartão de aprovação */
.tbr-v-campanha { display: grid; place-items: center; }
.tbr-aprova {
  width: 80%; max-width: 230px; padding: 13px 14px 14px; border-radius: 14px; background: #fff; border: 1px solid #e7e5e0;
  box-shadow: 0 22px 40px -22px rgba(20,24,40,.45); transform: rotate(1.4deg);
}
.tbr-aprova-topo { display: flex; align-items: center; gap: 8px; }
.tbr-aprova-topo b { font-size: 13px; letter-spacing: -0.01em; color: #1B1B1B; }
.tbr-aprova ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.tbr-aprova li { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; font-weight: 500; color: #5d5852; }
.tbr-aprova li i { transform: scale(0); animation: tbrMarca 6s cubic-bezier(.34,1.56,.64,1) infinite; }
.tbr-aprova li:nth-child(2) i { animation-delay: .35s; } .tbr-aprova li:nth-child(3) i { animation-delay: .7s; } .tbr-aprova li:nth-child(4) i { animation-delay: 1.05s; }
@keyframes tbrMarca { 0%, 8% { transform: scale(0); } 16%, 92% { transform: scale(1); } 100% { transform: scale(0); } }
.tbr-aprova-acoes { display: flex; gap: 6px; margin-top: 12px; }
.tbr-aprova-acoes span { flex: 1; padding: 7px 6px; border-radius: 99px; text-align: center; font-size: 11px; font-weight: 600; background: #f1efea; color: #4b4741; white-space: nowrap; }
.tbr-aprova-acoes .tbr-sim { flex: 1.5; background: #1B1B1B; color: #fff; }

/* faixa "e não para na criação" */
.tbr-tambem { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding: 26px 16px 30px; font-size: 14px; color: #55504A; }
.tbr-tambem b { margin-right: 6px; color: #1B1B1B; font-weight: 700; }
.tbr-tambem span { padding: 7px 13px; border-radius: 99px; background: #fff; border: 1px solid #e7e5e0; font-weight: 600; color: #3d3934; }

/* ============================================================
   DOBRA: CONHEÇA A EQUIPE
   ============================================================ */
.tbr-membros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: clamp(34px, 5vw, 56px) clamp(10px, 2vw, 22px) clamp(26px, 4vw, 40px); }
.tbr-membro {
  --tbr-cor: #B8956A;
  position: relative; background: #fff; border: 1px solid #ebe9e4; border-radius: 20px; cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 24px 50px -30px rgba(20,24,40,.28);
  transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s cubic-bezier(.16,1,.3,1), border-color .3s ease;
}
/* escadinha: os cartões pares descem um pouco, para a fileira não ficar em linha reta */
.tbr-membro:nth-child(even) { margin-top: 26px; }
.tbr-membro:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--tbr-cor) 45%, #ebe9e4); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 36px 60px -30px color-mix(in srgb, var(--tbr-cor) 55%, rgba(20,24,40,.3)); }
.tbr-membro-palco {
  position: relative; height: 204px; display: grid; place-items: end center; border-radius: 19px 19px 0 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 100%, color-mix(in srgb, var(--tbr-cor) 26%, transparent), transparent 70%),
    linear-gradient(180deg, #F7F6F3, #F1F0EC);
}
.tbr-membro-disco {
  position: absolute; left: 50%; bottom: 16px; width: 170px; height: 38px; margin-left: -85px; border-radius: 50%;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--tbr-cor) 30%, #fff) 0%, color-mix(in srgb, var(--tbr-cor) 8%, #fff) 60%, transparent 72%);
  border: 1px solid color-mix(in srgb, var(--tbr-cor) 22%, transparent);
}
.tbr-membro-palco tb-mascote { position: relative; z-index: 1; margin-bottom: 20px; }
.tbr-membro-texto { padding: 18px 20px 22px; text-align: center; }
.tbr-membro-texto h3 { margin: 0; font-size: 26px; line-height: 1; letter-spacing: -0.035em; font-weight: 800; color: #1B1B1B; }
.tbr-membro-papel {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; padding: 5px 11px; border-radius: 99px;
  background: color-mix(in srgb, var(--tbr-cor) 11%, #fff); color: color-mix(in srgb, var(--tbr-cor) 62%, #1B1B1B);
  font-size: 12px; font-weight: 700;
}
.tbr-membro-papel i { width: 7px; height: 7px; border-radius: 50%; background: var(--tbr-cor); }
.tbr-membro-texto p { margin: 11px auto 0; max-width: 24ch; font-size: 14px; line-height: 1.45; color: #5d5852; text-wrap: pretty; }
.tbr-equipe-fecho { margin: 0; padding: 26px 16px 30px; text-align: center; font-size: 16px; color: #55504A; }
.tbr-equipe-fecho b { color: #1B1B1B; }

@media (max-width: 1080px) { .tbr-membros { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .tbr-membros { gap: 10px; padding-left: 2px; padding-right: 2px; }
  .tbr-membro:nth-child(even) { margin-top: 18px; }
  .tbr-membro-palco { height: 132px; }
  .tbr-membro-palco tb-mascote { --tbm-tamanho: 108px !important; margin-bottom: 14px; }
  .tbr-membro-disco { width: 108px; margin-left: -54px; height: 26px; bottom: 11px; }
  .tbr-membro-texto { padding: 14px 10px 18px; }
  .tbr-membro-texto h3 { font-size: 21px; }
  .tbr-membro-texto p { font-size: 13px; }
}

/* ============================================================
   DOBRA: COMO FUNCIONA
   ============================================================ */
.tbr-passo { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: #B8956A; font-variant-numeric: tabular-nums; }

/* 01 · a ficha do negócio sendo preenchida */
.tbr-v-dna, .tbr-v-le, .tbr-v-decide { display: grid; place-items: center; }
.tbr-ficha {
  width: 78%; max-width: 270px; padding: 14px 15px 15px; border-radius: 14px; background: #fff; border: 1px solid #e7e5e0;
  box-shadow: 0 22px 40px -22px rgba(20,24,40,.45); transform: rotate(-1.5deg);
}
.tbr-ficha-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tbr-ficha-topo b { font-size: 13px; letter-spacing: -0.01em; color: #1B1B1B; }
.tbr-ficha-topo span { padding: 3px 8px; border-radius: 99px; background: #1B1B1B; color: #fff; font-size: 10px; font-weight: 700; white-space: nowrap; }
.tbr-ficha ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 9px; }
.tbr-ficha li { display: grid; grid-template-columns: 78px 1fr 16px; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600; color: #4b4741; }
.tbr-ficha li .tbr-l { transform-origin: 0 50%; animation: tbrEnche 6.5s cubic-bezier(.16,1,.3,1) infinite; background: color-mix(in srgb, var(--tbr-cor) 38%, #ece9e3); }
.tbr-ficha li .tbr-ok { transform: scale(0); animation: tbrMarca 6.5s cubic-bezier(.34,1.56,.64,1) infinite; }
.tbr-ficha li:nth-child(2) > i { animation-delay: .5s; } .tbr-ficha li:nth-child(3) > i { animation-delay: 1s; } .tbr-ficha li:nth-child(4) > i { animation-delay: 1.5s; }
@keyframes tbrEnche { 0%, 4% { transform: scaleX(0); } 16%, 92% { transform: scaleX(1); } 100% { transform: scaleX(0); } }

/* 02 · os agentes em volta do DNA */
.tbr-orbita { position: relative; width: 214px; height: 214px; }
.tbr-orbita-anel { position: absolute; inset: 22px; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--tbr-cor) 38%, #d9d6cf); animation: tbrGira 46s linear infinite; }
.tbr-orbita-centro {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 9px 13px; border-radius: 99px;
  background: #1B1B1B; color: #F1F0EE; font-size: 11.5px; font-weight: 700; white-space: nowrap; box-shadow: 0 14px 26px -12px rgba(0,0,0,.6);
}
.tbr-orb {
  position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; object-fit: contain;
  filter: drop-shadow(0 8px 10px rgba(20,40,90,.22)); animation: tbrPulsa 3.6s ease-in-out infinite;
}
.tbr-orb--1 { transform: translate(0, -92px); } .tbr-orb--2 { transform: translate(80px, -46px); animation-delay: -.6s; }
.tbr-orb--3 { transform: translate(80px, 46px); animation-delay: -1.2s; } .tbr-orb--4 { transform: translate(0, 92px); animation-delay: -1.8s; }
.tbr-orb--5 { transform: translate(-80px, 46px); animation-delay: -2.4s; } .tbr-orb--6 { transform: translate(-80px, -46px); animation-delay: -3s; }
@keyframes tbrGira { to { transform: rotate(360deg); } }
@keyframes tbrPulsa { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }

/* 03 · a fila de entregas, com a decisão na sua mão */
.tbr-fila { display: grid; gap: 8px; width: 80%; max-width: 268px; }
.tbr-fila-item {
  display: grid; grid-template-columns: 30px 1fr auto auto; align-items: center; gap: 8px; padding: 8px 11px 8px 8px; border-radius: 12px;
  background: #fff; border: 1px solid #e7e5e0; box-shadow: 0 12px 24px -18px rgba(20,24,40,.4); font-size: 12.5px; font-weight: 600; color: #1B1B1B;
}
.tbr-fila-item img { width: 30px; height: 30px; object-fit: contain; }
.tbr-fila-item em { font-style: normal; font-size: 11px; font-weight: 600; color: #7a756d; }
.tbr-fila-item--voce { grid-template-columns: 30px 1fr auto; border-color: #1B1B1B; box-shadow: 0 18px 30px -18px rgba(20,24,40,.55); transform: scale(1.04); }
.tbr-fila-item--voce b { padding: 6px 13px; border-radius: 99px; background: #1B1B1B; color: #fff; font-size: 11.5px; animation: tbrAperta 4.2s ease-in-out infinite; }

/* faixa: onde você usa (navegador atrás, celular na frente, mascote ao lado) */
.tbr-onde {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 24px;
  margin: clamp(26px, 4vw, 42px) clamp(10px, 2vw, 22px); padding: clamp(26px, 4vw, 46px) clamp(22px, 4vw, 52px);
  border-radius: 22px; background: #1B1B1B; color: #F1F0EE; position: relative; overflow: hidden;
  box-shadow: 0 40px 70px -40px rgba(20,24,40,.6);
}
.tbr-onde::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 80% at 82% 40%, rgba(61,134,245,.34), transparent 70%), radial-gradient(ellipse 40% 60% at 60% 110%, rgba(20,184,166,.22), transparent 70%);
}
.tbr-onde-texto { position: relative; }
.tbr-onde-texto h3 { margin: 12px 0 0; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.04; letter-spacing: -0.035em; font-weight: 800; text-wrap: balance; }
.tbr-onde-texto p { margin: 14px 0 0; max-width: 42ch; font-size: 16px; line-height: 1.55; color: rgba(241,240,238,.74); }
.tbr-onde-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.tbr-onde-chips span { padding: 8px 14px; border-radius: 99px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); font-size: 13px; font-weight: 600; }
.tbr-onde-palco { position: relative; height: 420px; }
.tbr-onde-nav {
  position: absolute; left: 0; top: 34px; width: 74%; border-radius: 14px; background: #262626; border: 1px solid rgba(255,255,255,.1); overflow: hidden;
  transform: perspective(1100px) rotateY(14deg) rotateX(4deg); box-shadow: 0 30px 60px -30px rgba(0,0,0,.8);
}
.tbr-onde-nav .tbr-nav-topo { background: #2f2f2f; border-bottom-color: rgba(255,255,255,.08); }
.tbr-onde-nav .tbr-nav-topo i { background: #4a4a4a; } .tbr-onde-nav .tbr-nav-topo span { background: #3a3a3a; }
.tbr-onde-nav-corpo { display: flex; flex-direction: column; gap: 9px; padding: 18px 16px 18px; }
.tbr-onde-nav .tbr-b { background: #3a3a3a; }
.tbr-onde-nav-grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 6px; }
.tbr-onde-nav-grade i { height: 86px; border-radius: 8px; background: linear-gradient(180deg, #353535, #2c2c2c); }
.tbr-fone {
  position: absolute; right: 12%; top: 0; width: 206px; height: 414px; padding: 8px; border-radius: 34px; background: #0c0c0c;
  border: 1px solid rgba(255,255,255,.16); box-shadow: 0 40px 70px -30px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.04);
  transform: rotate(3deg); animation: tbrPulsa 5s ease-in-out infinite;
}
.tbr-fone-tela { display: flex; flex-direction: column; gap: 9px; height: 100%; padding: 14px 11px 11px; border-radius: 27px; background: #1B1B1B; overflow: hidden; }
.tbr-fone-topo { display: flex; align-items: center; justify-content: space-between; }
.tbr-fone-topo img { width: 44px; height: auto; }
.tbr-fone-topo span { display: inline-flex; align-items: center; gap: 5px; font-size: 9.5px; font-weight: 600; color: rgba(241,240,238,.7); }
.tbr-fone-topo span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #2FB36B; }
.tbr-fone-eu { align-self: flex-end; max-width: 86%; padding: 8px 11px; border-radius: 14px 14px 4px 14px; background: #F1F0EE; color: #1B1B1B; font-size: 11px; font-weight: 500; line-height: 1.3; }
.tbr-fone-agente { display: flex; align-items: center; gap: 7px; padding: 7px 9px 7px 5px; border-radius: 13px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.09); }
.tbr-fone-agente img { width: 34px; height: 34px; object-fit: contain; flex: none; }
.tbr-fone-agente div { flex: 1; display: grid; gap: 2px; min-width: 0; }
.tbr-fone-agente b { font-size: 11px; } .tbr-fone-agente span { font-size: 9.5px; color: rgba(241,240,238,.62); }
.tbr-fone-barra { display: block; height: 3px; margin-top: 3px; border-radius: 9px; background: rgba(255,255,255,.14); position: relative; overflow: hidden; }
.tbr-fone-barra::after { content: ""; position: absolute; inset: 0; background: #F5B91E; border-radius: 9px; transform-origin: 0 50%; animation: tbrEnche 5s ease-in-out infinite; }
.tbr-fone-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; flex: 1; min-height: 0; }
.tbr-fone-grade img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.tbr-fone-campo { display: flex; align-items: center; justify-content: space-between; padding: 7px 7px 7px 12px; border-radius: 99px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); font-size: 10.5px; color: rgba(241,240,238,.6); }
.tbr-fone-campo i { width: 22px; height: 22px; border-radius: 50%; background: #F1F0EE; color: #1B1B1B; font-style: normal; font-size: 12px; display: grid; place-items: center; }
.tbr-onde-masc { position: absolute; right: -2%; bottom: 0; z-index: 3; }

@media (max-width: 900px) {
  .tbr-onde { grid-template-columns: minmax(0, 1fr); padding-bottom: 0; }
  .tbr-onde-palco { height: 400px; margin-top: 8px; }
  .tbr-onde-nav { display: none; }
  .tbr-fone { right: auto; left: 50%; margin-left: -124px; }
  .tbr-onde-masc { right: 4%; --tbm-tamanho: 104px !important; bottom: 10px; }
}

/* ============================================================
   DOBRA: ESTÚDIO DE CRIAÇÃO — painel escuro com os modelos e o que sai deles
   ============================================================ */
.tbr-painel {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); align-items: center; gap: 28px;
  margin: clamp(26px, 4vw, 42px) clamp(10px, 2vw, 22px); padding: clamp(26px, 4vw, 48px);
  border-radius: 22px; background: #1B1B1B; color: #F1F0EE; overflow: hidden; box-shadow: 0 40px 70px -40px rgba(20,24,40,.6);
}
.tbr-painel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 55% 70% at 86% 30%, rgba(245,185,30,.26), transparent 70%), radial-gradient(ellipse 45% 60% at 10% 110%, rgba(61,134,245,.22), transparent 70%);
}
.tbr-painel-lado { position: relative; }
.tbr-modelos { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
.tbr-modelo {
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px 9px 10px; border-radius: 13px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.11); font-size: 14px; font-weight: 600; white-space: nowrap;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), background .25s ease;
}
.tbr-modelo:hover { transform: translateY(-3px); background: rgba(255,255,255,.12); }
.tbr-modelo img { width: 22px; height: 22px; object-fit: contain; border-radius: 5px; }
.tbr-nota { width: 22px; height: 22px; border-radius: 6px; background: #F5B91E; position: relative; }
.tbr-nota::after { content: "♪"; position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-size: 13px; color: #1B1B1B; }
.tbr-caminhos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); }
.tbr-caminhos span { padding: 7px 13px; border-radius: 99px; background: #F1F0EE; color: #1B1B1B; font-size: 13px; font-weight: 700; }
.tbr-caminhos span + span { background: transparent; color: #F1F0EE; border: 1px solid rgba(255,255,255,.22); font-weight: 600; }

.tbr-saidas { position: relative; height: 360px; perspective: 1100px; }
.tbr-saida { position: absolute; margin: 0; border-radius: 16px; overflow: hidden; background: #262626; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 30px 50px -24px rgba(0,0,0,.85); }
.tbr-saida img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tbr-saida figcaption { position: absolute; left: 9px; top: 9px; padding: 4px 9px; border-radius: 99px; background: rgba(27,27,27,.82); color: #fff; font-size: 11px; font-weight: 700; }
.tbr-saida--img { left: 2%; top: 30px; width: 44%; height: 250px; transform: rotateY(16deg) rotate(-4deg); animation: tbrPulsa 5.2s ease-in-out infinite; }
.tbr-saida--video { left: 36%; top: 0; width: 38%; height: 300px; z-index: 2; animation: tbrPulsa 4.6s ease-in-out -1.2s infinite; }
.tbr-saida--voz { right: 0; top: 190px; width: 40%; height: 118px; z-index: 3; display: grid; place-items: center; padding-top: 18px; transform: rotate(3deg); animation: tbrPulsa 5.6s ease-in-out -2.4s infinite; }
.tbr-play { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(27,27,27,.82); border: 1px solid rgba(255,255,255,.35); }
.tbr-play::after { content: ""; position: absolute; left: 18px; top: 14px; border: 9px solid transparent; border-left: 14px solid #fff; border-right: 0; }
.tbr-ondas { display: flex; align-items: center; gap: 4px; height: 56px; }
.tbr-ondas i { width: 4px; height: var(--h); border-radius: 4px; background: #F5B91E; animation: tbrOnda 1.3s ease-in-out infinite; }
@keyframes tbrOnda { 0%, 100% { transform: scaleY(.45); } 50% { transform: scaleY(1); } }
.tbr-painel-masc { position: absolute; right: 4%; bottom: -8px; z-index: 4; }

/* ============================================================
   DOBRA: TRÁFEGO — conecte → crie a campanha → acompanhe
   ============================================================ */
.tbr-fluxo {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1.25fr) 40px minmax(0, 1fr); align-items: center;
  margin: clamp(26px, 4vw, 42px) clamp(10px, 2vw, 22px); padding: clamp(28px, 4vw, 46px) clamp(18px, 3vw, 40px) clamp(30px, 4vw, 48px);
  border-radius: 22px; background:
    radial-gradient(ellipse 60% 70% at 50% 0%, rgba(61,107,245,.16), transparent 70%),
    radial-gradient(ellipse 40% 60% at 100% 100%, rgba(125,176,241,.22), transparent 70%), #EEF1F6;
  border: 1px solid #e2e6ee;
}
.tbr-etapa {
  position: relative; padding: 16px 16px 14px; border-radius: 16px; background: #fff; border: 1px solid #e3e6ec;
  box-shadow: 0 26px 46px -28px rgba(20,40,90,.45); transition: transform .45s cubic-bezier(.16,1,.3,1);
}
.tbr-etapa:hover { transform: translateY(-4px); }
.tbr-etapa-n {
  position: absolute; left: 14px; top: -13px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: #1B1B1B; color: #fff; font-size: 12px; font-weight: 800; box-shadow: 0 8px 16px -8px rgba(0,0,0,.6);
}
.tbr-etapa > p { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid #eef0f4; font-size: 13px; line-height: 1.4; color: #5d5852; }
.tbr-etapa > p b { color: #1B1B1B; }
.tbr-etapa-topo { display: flex; align-items: center; gap: 10px; }
.tbr-etapa-topo div { display: grid; gap: 1px; }
.tbr-etapa-topo b { font-size: 14px; letter-spacing: -0.01em; color: #1B1B1B; }
.tbr-etapa-topo em { display: inline-flex; align-items: center; gap: 5px; font-style: normal; font-size: 11px; font-weight: 700; color: #1B7A47; }
.tbr-etapa-topo em::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #2FB36B; box-shadow: 0 0 0 3px rgba(47,179,107,.2); }
.tbr-etapa ul { list-style: none; margin: 13px 0 0; padding: 0; display: grid; gap: 7px; }
.tbr-etapa li { display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; border-radius: 9px; background: #F5F6F9; font-size: 12px; font-weight: 600; color: #3d3934; }
.tbr-etapa li i { transform: scale(0); animation: tbrMarca 7s cubic-bezier(.34,1.56,.64,1) infinite; }
.tbr-etapa li:nth-child(2) i { animation-delay: .4s; } .tbr-etapa li:nth-child(3) i { animation-delay: .8s; } .tbr-etapa li:nth-child(4) i { animation-delay: 1.2s; }
.tbr-etapa--cria { z-index: 1; padding: 18px 18px 14px; transform: scale(1.03); box-shadow: 0 34px 60px -30px rgba(20,40,90,.55); }
.tbr-etapa--cria:hover { transform: scale(1.03) translateY(-4px); }
.tbr-cria-topo { display: flex; align-items: center; justify-content: space-between; }
.tbr-cria-topo b { font-size: 15px; letter-spacing: -0.015em; color: #1B1B1B; }
.tbr-cria-topo span { padding: 3px 9px; border-radius: 99px; background: #E8EEFE; color: #2A4FC9; font-size: 10.5px; font-weight: 700; }
.tbr-cria-passos { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.tbr-cria-passos span { padding: 5px 9px; border-radius: 99px; background: #F1F2F5; color: #8a857d; font-size: 11px; font-weight: 600; }
.tbr-cria-passos span.on { background: #1B1B1B; color: #fff; }
.tbr-cria-criativos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 12px; }
.tbr-cria-criativos img { width: 100%; height: 108px; object-fit: cover; border-radius: 10px; }
.tbr-cria-criativos img:nth-child(2) { outline: 2px solid #3D6BF5; outline-offset: 2px; }
.tbr-cria-acao { margin-top: 12px; }
.tbr-cria-acao span { display: block; padding: 9px; border-radius: 99px; background: #1B1B1B; color: #fff; text-align: center; font-size: 12.5px; font-weight: 700; animation: tbrAperta 5s ease-in-out infinite; }
.tbr-barras { display: flex; align-items: flex-end; gap: 7px; height: 112px; margin-top: 14px; padding: 10px 10px 0; border-radius: 10px; background: #F5F6F9; }
.tbr-barras i { flex: 1; height: var(--h); border-radius: 5px 5px 0 0; background: linear-gradient(180deg, #3D6BF5, #86A6FB); transform-origin: 50% 100%; animation: tbrSobe 5s cubic-bezier(.16,1,.3,1) infinite; }
.tbr-barras i:nth-child(2) { animation-delay: .1s; } .tbr-barras i:nth-child(3) { animation-delay: .2s; } .tbr-barras i:nth-child(4) { animation-delay: .3s; }
.tbr-barras i:nth-child(5) { animation-delay: .4s; } .tbr-barras i:nth-child(6) { animation-delay: .5s; } .tbr-barras i:nth-child(7) { animation-delay: .6s; }
@keyframes tbrSobe { 0%, 6% { transform: scaleY(.08); } 26%, 92% { transform: scaleY(1); } 100% { transform: scaleY(.08); } }
/* o fio que liga as etapas, com um ponto correndo */
.tbr-fio { position: relative; height: 2px; background: repeating-linear-gradient(90deg, #b9c3d8 0 5px, transparent 5px 10px); }
.tbr-fio::after { content: ""; position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: #3D6BF5; animation: tbrCorre 2.4s linear infinite; }
@keyframes tbrCorre { from { transform: translateX(0); opacity: 1; } to { transform: translateX(32px); opacity: 1; } }
.tbr-fluxo-masc { position: absolute; right: -18px; bottom: -22px; z-index: 3; }

.tbr-tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; padding: 10px clamp(14px, 3vw, 34px) 0; }
.tbr-tres h3 { margin: 0; font-size: 17px; letter-spacing: -0.02em; font-weight: 800; color: #1B1B1B; }
.tbr-tres p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.5; color: #5d5852; }
.tbr-plataformas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding: 28px 16px 30px; }
.tbr-plataformas b { margin-right: 8px; font-size: 11.5px; letter-spacing: .12em; color: #8a857d; }
.tbr-plataformas span { padding: 7px 13px; border-radius: 99px; background: #fff; border: 1px solid #e7e5e0; font-size: 13.5px; font-weight: 600; color: #3d3934; }

@media (max-width: 980px) {
  .tbr-painel { grid-template-columns: minmax(0, 1fr); }
  .tbr-saidas { height: 330px; max-width: 460px; margin: 0 auto; width: 100%; }
  .tbr-fluxo { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .tbr-fio { width: 2px; height: 34px; margin: 0 auto; background: repeating-linear-gradient(180deg, #b9c3d8 0 5px, transparent 5px 10px); }
  .tbr-fio::after { left: -3px; top: 0; animation-name: tbrCorreV; }
  .tbr-etapa--cria, .tbr-etapa--cria:hover { transform: none; }
  .tbr-tres { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .tbr-fluxo-masc { right: -6px; --tbm-tamanho: 104px !important; }
  .tbr-painel-masc { --tbm-tamanho: 108px !important; right: 0; }
}
@keyframes tbrCorreV { from { transform: translateY(0); } to { transform: translateY(26px); } }

/* ============================================================
   DOBRA: CASH ON DELIVERY — kanban, painel e conexão
   ============================================================ */
.tbr-v-kanban, .tbr-v-painel, .tbr-v-ponte { display: grid; place-items: center; }
.tbr-kanban {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: 88%; padding: 10px; border-radius: 13px; background: #fff; border: 1px solid #e7e5e0;
  box-shadow: 0 22px 40px -22px rgba(20,24,40,.45); transform: perspective(900px) rotateX(6deg) rotate(-1deg);
}
.tbr-kanban div { display: flex; flex-direction: column; gap: 5px; min-height: 124px; padding: 6px 5px; border-radius: 8px; background: #F5F4F1; }
.tbr-kanban b { font-size: 8.5px; line-height: 1.15; font-weight: 700; color: #6f6a62; min-height: 20px; }
.tbr-kanban i { display: block; height: 22px; border-radius: 6px; background: #fff; border: 1px solid #e7e5e0; box-shadow: 0 3px 6px -4px rgba(20,24,40,.3); }
.tbr-kanban i.ok { background: #E7F6EE; border-color: #c9ebd8; }
.tbr-kanban-anda { border-color: #2FB36B !important; animation: tbrAnda 5.5s cubic-bezier(.16,1,.3,1) infinite; position: relative; z-index: 2; }
@keyframes tbrAnda { 0%, 30% { transform: none; } 45%, 86% { transform: translate(calc(100% + 16px), -27px); } 100% { transform: none; } }

.tbr-medidas { width: 80%; max-width: 280px; padding: 14px 15px 0; border-radius: 14px; background: #fff; border: 1px solid #e7e5e0; box-shadow: 0 22px 40px -22px rgba(20,24,40,.45); }
.tbr-medida { display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 9px; margin-bottom: 9px; font-size: 11.5px; font-weight: 600; color: #4b4741; }
.tbr-medida i { display: block; height: 8px; border-radius: 99px; background: #eceae5; position: relative; overflow: hidden; }
.tbr-medida i::after { content: ""; position: absolute; inset: 0; width: var(--w); border-radius: 99px; background: #2FB36B; transform-origin: 0 50%; animation: tbrEnche 6s cubic-bezier(.16,1,.3,1) infinite; }
.tbr-medidas-grafico { display: flex; align-items: flex-end; gap: 6px; height: 74px; margin-top: 12px; }
.tbr-medidas-grafico i { flex: 1; height: var(--h); border-radius: 5px 5px 0 0; background: linear-gradient(180deg, #2FB36B, #9BDDB9); transform-origin: 50% 100%; animation: tbrSobe 6s cubic-bezier(.16,1,.3,1) infinite; }
.tbr-medidas-grafico i:nth-child(2) { animation-delay: .1s; } .tbr-medidas-grafico i:nth-child(3) { animation-delay: .2s; } .tbr-medidas-grafico i:nth-child(4) { animation-delay: .3s; }
.tbr-medidas-grafico i:nth-child(5) { animation-delay: .4s; } .tbr-medidas-grafico i:nth-child(6) { animation-delay: .5s; }

.tbr-v-ponte { align-content: center; gap: 16px; }
.tbr-ponte { display: grid; grid-template-columns: auto 1fr auto; align-items: center; width: 86%; gap: 8px; }
.tbr-ponte-no {
  display: grid; justify-items: center; gap: 3px; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid #e7e5e0;
  box-shadow: 0 16px 30px -18px rgba(20,24,40,.4); font-size: 14px; font-weight: 800; letter-spacing: -0.01em; color: #1B1B1B;
}
.tbr-ponte-no em { font-style: normal; font-size: 10px; font-weight: 600; color: #7a756d; letter-spacing: 0; }
.tbr-ponte-no--nos { background: #1B1B1B; border-color: #1B1B1B; }
.tbr-ponte-no--nos img { width: 54px; height: auto; } .tbr-ponte-no--nos em { color: rgba(241,240,238,.7); }
.tbr-ponte-fio { position: relative; height: 2px; background: repeating-linear-gradient(90deg, #9ccfb3 0 5px, transparent 5px 10px); }
.tbr-ponte-fio::after { content: ""; position: absolute; top: -4px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: #2FB36B; box-shadow: 0 0 0 4px rgba(47,179,107,.2); animation: tbrVai 2.6s cubic-bezier(.5,0,.5,1) infinite; }
@keyframes tbrVai { from { left: 0; } to { left: calc(100% - 10px); } }
.tbr-ponte-pedido {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px 8px 9px; border-radius: 99px; background: #fff; border: 1px solid #c9ebd8;
  font-size: 12px; font-weight: 700; color: #1B7A47; box-shadow: 0 12px 22px -14px rgba(20,24,40,.4); animation: tbrSelo 2.6s cubic-bezier(.34,1.56,.64,1) infinite;
}

/* ============================================================
   DOBRA: PARA QUEM É — seis situações, cada uma com quem ajuda
   ============================================================ */
.tbr-perfis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: clamp(46px, 6vw, 70px) clamp(10px, 2vw, 22px) clamp(26px, 4vw, 40px); row-gap: 54px; }
.tbr-perfil {
  --tbr-cor: #B8956A;
  position: relative; padding: 62px 22px 24px; border-radius: 20px; background: #fff; border: 1px solid #ebe9e4; cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 24px 50px -30px rgba(20,24,40,.28);
  transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s cubic-bezier(.16,1,.3,1), border-color .3s ease;
}
.tbr-perfil::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 92px; border-radius: 19px 19px 0 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 100% at 18% 0%, color-mix(in srgb, var(--tbr-cor) 22%, transparent), transparent 72%);
}
.tbr-perfil:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--tbr-cor) 45%, #ebe9e4); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 36px 60px -30px color-mix(in srgb, var(--tbr-cor) 55%, rgba(20,24,40,.3)); }
.tbr-perfil tb-mascote { position: absolute; left: 14px; top: -44px; z-index: 1; }
.tbr-perfil h3 { position: relative; margin: 0; font-size: 21px; line-height: 1.12; letter-spacing: -0.028em; font-weight: 800; color: #1B1B1B; text-wrap: balance; }
.tbr-perfil p { position: relative; margin: 10px 0 0; font-size: 14.5px; line-height: 1.5; color: #5d5852; text-wrap: pretty; }
.tbr-nichos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding: 28px 16px 6px; }
.tbr-nichos b { margin-right: 6px; font-size: 14px; color: #1B1B1B; }
.tbr-nichos span { padding: 7px 13px; border-radius: 99px; background: #fff; border: 1px solid #e7e5e0; font-size: 13.5px; font-weight: 600; color: #3d3934; }
.tbr-quem-fecho { margin: 0 auto; max-width: 760px; padding: 22px 20px 34px; text-align: center; font-size: clamp(18px, 2.1vw, 24px); line-height: 1.4; letter-spacing: -0.015em; color: #55504A; text-wrap: balance; }
.tbr-quem-fecho b { color: #1B1B1B; }
.tbr-quem-fecho em { font-family: Georgia, 'Times New Roman', serif; color: #B8956A; }
.tbr-tres { padding-top: 34px; }

@media (max-width: 1080px) { .tbr-perfis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .tbr-perfis { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   CONEXÃO ENTRE DOBRAS (10/10, pedido do João): o vão vertical entre uma dobra e a
   seguinte estava grande (250–390px). As dobras agora encostam uma na outra: a
   moldura TBF segue contínua e o respiro fica só no cabeçalho de cada uma.
   Vale também para as dobras dos vídeos e da oportunidade (só o espaço, nada do conteúdo).
   ============================================================ */
.tbr, .tbv, .tbo { padding-top: 0; padding-bottom: 0; }
.tbr-cabeca { padding-top: clamp(52px, 6vw, 84px); padding-bottom: clamp(22px, 3vw, 34px); }
.tbv .tbv-cabeca { padding-top: clamp(52px, 6vw, 84px); }
.tbo .tbo-cabeca { padding-top: clamp(52px, 6vw, 84px); padding-bottom: clamp(22px, 3vw, 34px); }
.tbo .tbo-fecho { padding-bottom: clamp(26px, 3.5vw, 40px); }
.tbv .tbv-artes { padding-bottom: clamp(26px, 3.5vw, 40px); }
.tbr-onde, .tbr-painel, .tbr-fluxo { margin-bottom: clamp(18px, 2.5vw, 28px); }

/* ============================================================
   VÍDEOS: faixa "feito para onde você vende" (dentro da dobra Feito na Transbordo)
   ============================================================ */
.tbr-vende::before { background: radial-gradient(ellipse 60% 80% at 80% 40%, rgba(245,185,30,.24), transparent 70%), radial-gradient(ellipse 40% 60% at 60% 110%, rgba(238,77,45,.2), transparent 70%); }
.tbr-vende-palco { position: relative; height: 400px; perspective: 1100px; }
.tbr-vfone { position: absolute; margin: 0; width: 34%; max-width: 172px; aspect-ratio: 9 / 16; border-radius: 20px; overflow: hidden; background: #262626; border: 4px solid #0c0c0c; outline: 1px solid rgba(255,255,255,.16); box-shadow: 0 34px 60px -26px rgba(0,0,0,.9); }
.tbr-vfone img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tbr-vfone figcaption { position: absolute; left: 8px; top: 8px; padding: 4px 9px; border-radius: 99px; background: rgba(27,27,27,.84); color: #fff; font-size: 10.5px; font-weight: 700; }
.tbr-vfone.v1 { left: 6%; top: 46px; transform: rotateY(18deg) rotate(-5deg); animation: tbrPulsa 5.4s ease-in-out infinite; }
.tbr-vfone.v2 { left: 34%; top: 8px; z-index: 2; animation: tbrPulsa 4.8s ease-in-out -1.4s infinite; }
.tbr-vfone.v3 { left: 62%; top: 52px; transform: rotateY(-18deg) rotate(5deg); animation: tbrPulsa 5.8s ease-in-out -2.6s infinite; }
.tbr-plat { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px 8px 10px; border-radius: 99px; background: #fff; color: #1B1B1B; font-size: 12.5px; font-weight: 700; white-space: nowrap; box-shadow: 0 16px 28px -14px rgba(0,0,0,.8); animation: tbrPulsa 4.4s ease-in-out infinite; }
.tbr-plat i { width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.tbr-plat.p1 { left: -2%; top: 8px; } .tbr-plat.p2 { right: 0; top: 18px; animation-delay: -1.1s; }
.tbr-plat.p3 { left: 0; bottom: 34px; animation-delay: -2.2s; } .tbr-plat.p4 { left: 46%; bottom: 6px; animation-delay: -3.3s; }

/* VÍDEOS: a fábrica de influenciadores (elenco) e a barra de plataformas */
.tbr-onde-texto h3 em { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 400; letter-spacing: -0.02em; color: #F5D9A8; }
.tbr-elenco { margin-top: 22px; }
.tbr-elenco-rotulo { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(241,240,238,.55); }
.tbr-elenco-rostos { display: flex; align-items: center; margin-top: 10px; }
.tbr-elenco-rostos img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; object-position: 50% 22%; border: 3px solid #1B1B1B; margin-right: -10px; box-shadow: 0 8px 16px -8px rgba(0,0,0,.8); transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.tbr-elenco-rostos img:hover { transform: translateY(-6px) scale(1.12); z-index: 2; }
.tbr-elenco-rostos i { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; margin-left: 2px; border: 2px dashed rgba(255,255,255,.4); color: #F1F0EE; font-style: normal; font-size: 24px; font-weight: 300; }
.tbr-vende .tbr-plat { padding: 8px 14px; }
.tbr-vende .tbr-plat.p4 { left: 40%; bottom: 4px; }
.tbr-plataformas-logos { display: grid; justify-items: center; gap: 16px; padding: 14px 16px clamp(26px, 3.5vw, 38px); }
.tbr-plataformas-logos b { font-size: 15px; font-weight: 600; color: #55504A; }
.tbr-plataformas-logos > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.tbr-plataformas-logos span { display: grid; place-items: center; height: 64px; padding: 0 22px; border-radius: 16px; background: #fff; border: 1px solid #ebe9e4; box-shadow: 0 14px 28px -22px rgba(20,24,40,.4); transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.tbr-plataformas-logos span:hover { transform: translateY(-4px); }
.tbr-plataformas-logos span img { display: block; height: 30px; width: auto; }
.tbr-plataformas-logos span:first-child img { height: 46px; }
.tbr-plataformas-logos .tbr-plataforma-meta { display: inline-flex; grid-auto-flow: column; gap: 10px; font-size: 14.5px; font-weight: 700; color: #1B1B1B; white-space: nowrap; }
.tbr-plataformas-logos .tbr-plataforma-meta img { height: 24px; }
@media (max-width: 640px) { .tbr-plataformas-logos span { height: 52px; padding: 0 14px; } .tbr-plataformas-logos span img { height: 23px; } .tbr-plataformas-logos span:first-child img { height: 36px; } .tbr-elenco-rostos img, .tbr-elenco-rostos i { width: 44px; height: 44px; } }

/* PARA QUEM: o cartão largo de quem presta serviço */
.tbr-perfil--largo { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px; padding: 26px 30px 26px 168px; background: #1B1B1B; border-color: #1B1B1B; color: #F1F0EE; }
.tbr-perfil--largo::before { height: 100%; border-radius: 19px; background: radial-gradient(ellipse 50% 120% at 8% 50%, color-mix(in srgb, var(--tbr-cor) 46%, transparent), transparent 72%); }
.tbr-perfil--largo tb-mascote { left: 22px; top: auto; bottom: 0; }
.tbr-perfil--largo h3 { color: #F1F0EE; font-size: 24px; }
.tbr-perfil--largo p { color: rgba(241,240,238,.74); max-width: 54ch; }
.tbr-perfil-chips { position: relative; display: grid; gap: 7px; justify-items: start; }
.tbr-perfil-chips span { padding: 6px 12px; border-radius: 99px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.07); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.tbr-perfil-chips a { margin-top: 4px; font-size: 13px; font-weight: 700; color: #F1F0EE; text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 900px) {
  .tbr-vende-palco { height: 360px; max-width: 420px; margin: 8px auto 0; width: 100%; }
  .tbr-vende .tbr-onde-masc { right: 0; }
  .tbr-perfil--largo { grid-template-columns: minmax(0, 1fr); padding: 96px 22px 24px; }
  .tbr-perfil--largo tb-mascote { left: 14px; top: -34px; bottom: auto; --tbm-tamanho: 116px !important; }
}

/* ============================================================
   DOBRA: TRANSBORDO DESIGN — o pedido vira a página no ar
   ============================================================ */
.tbr-atelie {
  position: relative; display: grid; grid-template-columns: minmax(0, .82fr) 40px minmax(0, 1.18fr); align-items: center;
  margin: clamp(22px, 3vw, 34px) clamp(10px, 2vw, 22px); padding: clamp(28px, 4vw, 48px) clamp(18px, 3vw, 44px) clamp(54px, 6vw, 74px);
  border-radius: 22px; border: 1px solid #e6e2ee; background:
    radial-gradient(ellipse 60% 70% at 70% 0%, rgba(139,92,246,.18), transparent 70%),
    radial-gradient(ellipse 40% 60% at 0% 100%, rgba(125,176,241,.2), transparent 70%), #F1EFF6;
}
.tbr-atelie-pedido { padding: 18px 18px 14px; border-radius: 18px; background: #fff; border: 1px solid #e7e5e0; box-shadow: 0 26px 46px -28px rgba(40,20,90,.45); }
.tbr-atelie-texto { margin: 12px 0 0; min-height: 96px; font-size: 16px; line-height: 1.45; color: #1B1B1B; }
.tbr-atelie-texto span { display: inline; border-right: 2px solid #8B5CF6; padding-right: 2px; animation: tbrPisca 1s steps(1) infinite; }
@keyframes tbrPisca { 50% { border-color: transparent; } }
.tbr-atelie-base { display: flex; align-items: center; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #f0eee9; }
.tbr-atelie-base span { padding: 6px 11px; border-radius: 99px; border: 1px solid #e7e5e0; font-size: 12px; font-weight: 600; color: #4b4741; }
.tbr-atelie-base i { margin-left: auto; width: 32px; height: 32px; border-radius: 50%; background: #1B1B1B; color: #fff; font-style: normal; display: grid; place-items: center; animation: tbrAperta 5s ease-in-out infinite; }
.tbr-atelie .tbr-fio::after { background: #8B5CF6; }
.tbr-atelie-janela {
  position: relative; border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid #dcd8e6;
  box-shadow: 0 40px 70px -34px rgba(40,20,90,.6); transform: perspective(1300px) rotateY(-11deg) rotateX(4deg); transition: transform .6s cubic-bezier(.16,1,.3,1);
}
.tbr-atelie:hover .tbr-atelie-janela { transform: perspective(1300px) rotateY(-4deg) rotateX(1deg); }
.tbr-atelie-janela img { display: block; width: 100%; height: auto; }
.tbr-atelie-noar { left: auto; right: 14px; bottom: 14px; }
.tbr-atelie-masc { position: absolute; right: -14px; bottom: -18px; z-index: 3; }
.tbr-atelie-chips { position: absolute; left: clamp(18px, 3vw, 44px); bottom: 20px; display: flex; flex-wrap: wrap; gap: 7px; }
.tbr-atelie-chips span { padding: 6px 12px; border-radius: 99px; background: #1B1B1B; color: #F1F0EE; font-size: 12px; font-weight: 600; }

.tbr-formatos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; padding: 6px clamp(10px, 2vw, 22px) clamp(26px, 3.5vw, 40px); }
.tbr-formato { padding: 14px 14px 16px; border-radius: 16px; background: #fff; border: 1px solid #ebe9e4; box-shadow: 0 18px 36px -28px rgba(20,24,40,.35); transition: transform .4s cubic-bezier(.16,1,.3,1), border-color .3s ease; }
.tbr-formato:hover { transform: translateY(-5px); border-color: #c9b8f7; }
.tbr-formato h3 { margin: 12px 0 0; font-size: 15.5px; letter-spacing: -0.02em; font-weight: 800; color: #1B1B1B; }
.tbr-formato p { margin: 5px 0 0; font-size: 13px; line-height: 1.4; color: #5d5852; }
.tbr-formato-desenho { position: relative; height: 84px; border-radius: 10px; background: #F4F2F8; overflow: hidden; display: grid; place-items: center; }
.tbr-formato-desenho i { display: block; border-radius: 4px; background: #d9d3ea; }
.tbr-formato:hover .tbr-formato-desenho i { background: #b9a5f2; }
.tbr-f-site { grid-template-columns: repeat(3, 1fr); gap: 5px; padding: 12px 16px; place-items: stretch; align-content: center; }
.tbr-f-site .f-barra { grid-column: 1 / -1; height: 5px; width: 40%; } .tbr-f-site .f-hero { grid-column: 1 / -1; height: 22px; } .tbr-f-site .f-col { height: 16px; }
.tbr-f-slides i { position: absolute; width: 62px; height: 40px; border: 2px solid #F4F2F8; } .tbr-f-slides .f-slide { left: 22%; top: 24px; } .tbr-f-slides .f-slide--2 { left: 32%; top: 18px; } .tbr-f-slides .f-slide--3 { left: 42%; top: 12px; }
.tbr-f-carrossel { grid-auto-flow: column; gap: 6px; } .tbr-f-carrossel i { width: 38px; height: 48px; }
.tbr-f-quiz { gap: 5px; padding: 12px 22px; place-items: stretch; align-content: center; } .tbr-f-quiz .f-perg { height: 8px; width: 70%; } .tbr-f-quiz .f-op { height: 11px; border-radius: 99px; } .tbr-f-quiz .f-op--sim { background: #8B5CF6 !important; }
.tbr-f-proto i { position: absolute; top: 14px; height: 56px; border: 2px solid #F4F2F8; } .tbr-f-proto .f-tela { left: 24%; width: 62px; } .tbr-f-proto .f-tela--2 { left: 58%; width: 30px; top: 22px; height: 48px; border-radius: 7px; }

/* ============================================================
   DOBRA: COMPARATIVO — as assinaturas soltas × a Transbordo
   ============================================================ */
.tbr-versus { display: grid; grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr); align-items: center; padding: clamp(22px, 3vw, 36px) clamp(10px, 2vw, 22px) 8px; }
.tbr-soltas { padding: 24px 24px 20px; border-radius: 22px; background: #fff; border: 1px dashed #d9d6cf; }
.tbr-soltas h3, .tbr-junta h3 { margin: 8px 0 0; font-size: 23px; line-height: 1.1; letter-spacing: -0.03em; font-weight: 800; }
.tbr-soltas-pilha { display: grid; gap: 8px; margin-top: 18px; }
.tbr-solta {
  display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 11px; padding: 10px 14px 10px 10px; border-radius: 13px;
  background: #F7F6F3; border: 1px solid #ebe9e4; transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
/* espalhadas: cada uma torta para um lado, como contas soltas na mesa */
.tbr-solta:nth-child(odd) { transform: rotate(-1.3deg) translateX(-5px); } .tbr-solta:nth-child(even) { transform: rotate(1.1deg) translateX(7px); }
.tbr-soltas:hover .tbr-solta { transform: none; }
.tbr-solta img { width: 28px; height: 28px; border-radius: 7px; object-fit: contain; }
.tbr-solta b { display: block; font-size: 14px; letter-spacing: -0.01em; color: #1B1B1B; } .tbr-solta span { display: block; font-size: 12px; color: #7a756d; }
.tbr-solta em { font-style: normal; font-size: 14px; font-weight: 700; color: #C8503E; text-decoration: line-through; white-space: nowrap; }
.tbr-soltas-total, .tbr-junta-preco { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid #ebe9e4; }
.tbr-soltas-total span, .tbr-junta-preco span { display: block; font-size: 13px; font-weight: 600; } .tbr-soltas-total small, .tbr-junta-preco small { display: block; margin-top: 2px; font-size: 12px; }
.tbr-soltas-total span { color: #5d5852; } .tbr-soltas-total small { color: #C8503E; }
.tbr-soltas-total b { font-size: 30px; letter-spacing: -0.03em; color: #C8503E; text-decoration: line-through; white-space: nowrap; }
.tbr-versus-seta { justify-self: center; width: 40px; height: 40px; border-radius: 50%; background: #1B1B1B; color: #fff; display: grid; place-items: center; font-size: 18px; box-shadow: 0 14px 26px -12px rgba(0,0,0,.6); z-index: 1; }
.tbr-junta { position: relative; padding: 26px 26px 24px; border-radius: 22px; background: #1B1B1B; color: #F1F0EE; overflow: hidden; box-shadow: 0 44px 80px -40px rgba(20,24,40,.7); }
.tbr-junta::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 50% at 80% 0%, rgba(61,134,245,.3), transparent 70%), radial-gradient(ellipse 50% 50% at 0% 100%, rgba(184,149,106,.24), transparent 70%); }
.tbr-junta > * { position: relative; }
.tbr-junta-rostos { display: flex; flex-wrap: wrap; margin-top: 16px; }
.tbr-junta-rostos img { width: 50px; height: 50px; object-fit: contain; margin-right: -8px; filter: drop-shadow(0 6px 8px rgba(0,0,0,.5)); animation: tbrPulsa 3.6s ease-in-out infinite; }
.tbr-junta-rostos img:nth-child(2n) { animation-delay: -1.2s; } .tbr-junta-rostos img:nth-child(3n) { animation-delay: -2.4s; }
.tbr-junta ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 11px; }
.tbr-junta li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; align-items: start; }
.tbr-junta li .tbr-ok { margin-top: 2px; }
.tbr-junta li b { display: block; font-size: 14px; letter-spacing: -0.01em; } .tbr-junta li span { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: rgba(241,240,238,.62); }
.tbr-junta-preco { border-top-color: rgba(255,255,255,.12); } .tbr-junta-preco span { color: rgba(241,240,238,.7); } .tbr-junta-preco small { color: #5fd49a; }
.tbr-junta-preco b { font-size: 34px; letter-spacing: -0.035em; white-space: nowrap; }
.tbr-junta-botao { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; padding: 13px; border-radius: 99px; background: #F1F0EE; color: #1B1B1B; font-size: 14.5px; font-weight: 700; text-decoration: none; transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
.tbr-junta-botao:hover { transform: translateY(-2px); }

/* ============================================================
   PLANOS: o resumo visual dentro de cada card (no lugar da lista de texto)
   ============================================================ */
.tbr-plano-dentro { display: grid; gap: 12px; margin: 4px 0 6px; }
.tbr-plano-linha > span { display: block; font-size: 12.5px; font-weight: 700; color: #3d3934; }
.tbr-plano-rostos { display: flex; flex-wrap: wrap; margin-top: 6px; }
.tbr-plano-rostos img { width: 30px; height: 30px; object-fit: contain; margin-right: -3px; transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
.tbr-plano-rostos img:hover { transform: translateY(-4px) scale(1.25); }
.tbr-plano-logos { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.tbr-plano-logos img { width: 22px; height: 22px; padding: 3px; border-radius: 8px; background: #1B1B1B; object-fit: contain; }
.tbr-plano-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.tbr-plano-chips span { padding: 5px 9px; border-radius: 99px; background: #F4F3F0; border: 1px solid #ebe9e4; font-size: 11.5px; font-weight: 600; color: #4b4741; white-space: nowrap; }

@media (max-width: 980px) {
  .tbr-atelie { grid-template-columns: minmax(0, 1fr); padding-bottom: 96px; }
  .tbr-atelie-janela, .tbr-atelie:hover .tbr-atelie-janela { transform: none; }
  .tbr-atelie-masc { --tbm-tamanho: 104px !important; right: -4px; }
  .tbr-formatos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tbr-versus { grid-template-columns: minmax(0, 1fr); }
  .tbr-versus-seta { margin: -8px auto; transform: rotate(90deg); }
  .tbr-junta-rostos img { width: 40px; height: 40px; margin-right: -6px; }
}

/* ============================================================
   RODADA 4 (10/10): estúdio com esteira de modelos, "três portas" e serviços em miniatura
   Logos dos modelos: os oficiais do app (public/assets/modelos/, cópia de ico_modelos). Nada desenhado à mão.
   ============================================================ */
.tbr-painel-lado { min-width: 0; }
.tbr-painel-titulo { margin: 10px 0 0; font-size: clamp(24px, 2.8vw, 34px); line-height: 1.06; letter-spacing: -0.035em; font-weight: 800; text-wrap: balance; }
.tbr-painel-titulo em { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 400; letter-spacing: -0.02em; color: #F5D9A8; }
.tbr-vivo { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 6px 12px 6px 10px; border-radius: 99px; background: rgba(47,179,107,.14); border: 1px solid rgba(47,179,107,.35); color: #8fe3b6; font-size: 12.5px; font-weight: 700; }
.tbr-vivo i { width: 7px; height: 7px; border-radius: 50%; background: #2FB36B; box-shadow: 0 0 0 0 rgba(47,179,107,.7); animation: tbrVivo 1.8s ease-out infinite; }
@keyframes tbrVivo { to { box-shadow: 0 0 0 9px rgba(47,179,107,0); } }
.tbr-esteira { margin-top: 18px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.tbr-esteira + .tbr-esteira { margin-top: 9px; }
.tbr-esteira > div { display: flex; gap: 9px; width: max-content; animation: tbrEsteira 34s linear infinite; }
.tbr-esteira--volta > div { animation-direction: reverse; animation-duration: 40s; }
.tbr-esteira:hover > div { animation-play-state: paused; }
@keyframes tbrEsteira { to { transform: translateX(calc(-50% - 4.5px)); } }
.tbr-esteira .tbr-modelo img { width: 22px; height: 22px; border-radius: 0; }

/* ---------- onde você usa: três portas ---------- */
.tbr-portas {
  position: relative; margin: clamp(22px, 3vw, 34px) clamp(10px, 2vw, 22px) clamp(18px, 2.5vw, 28px); padding: clamp(30px, 4vw, 50px) clamp(18px, 3vw, 44px) 0;
  border-radius: 24px; background: #1B1B1B; color: #F1F0EE; overflow: hidden; box-shadow: 0 40px 70px -40px rgba(20,24,40,.6);
}
.tbr-portas::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 55% 60% at 50% 105%, rgba(61,134,245,.5), transparent 70%), radial-gradient(ellipse 30% 40% at 12% 0%, rgba(20,184,166,.18), transparent 70%), radial-gradient(ellipse 30% 40% at 88% 0%, rgba(184,149,106,.2), transparent 70%); }
.tbr-portas > * { position: relative; }
.tbr-portas-cabeca { text-align: center; max-width: 640px; margin: 0 auto; }
.tbr-portas-cabeca h3 { margin: 10px 0 0; font-size: clamp(28px, 3.6vw, 46px); line-height: 1.02; letter-spacing: -0.04em; font-weight: 800; }
.tbr-portas-cabeca h3 em { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 400; letter-spacing: -0.02em; color: #F5D9A8; }
.tbr-portas-cabeca p { margin: 14px auto 0; font-size: 16px; line-height: 1.55; color: rgba(241,240,238,.74); text-wrap: pretty; }
.tbr-portas-palco { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: clamp(14px, 2.6vw, 38px); margin-top: clamp(28px, 4vw, 46px); perspective: 1400px; }
.tbr-porta { margin: 0; display: grid; justify-items: center; gap: 16px; padding-bottom: 30px; transition: transform .5s cubic-bezier(.16,1,.3,1); }
.tbr-porta:hover { transform: translateY(-8px); }
.tbr-porta figcaption { display: grid; justify-items: center; gap: 2px; text-align: center; }
.tbr-porta figcaption b { font-size: 17px; letter-spacing: -0.02em; }
.tbr-porta figcaption span { font-size: 13px; color: rgba(241,240,238,.62); }
.tbr-porta-janela { width: 100%; border-radius: 14px; overflow: hidden; background: #262626; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 34px 60px -28px rgba(0,0,0,.9); transform: rotateY(16deg) rotateX(3deg); transform-origin: 100% 50%; }
.tbr-porta-janela .tbr-nav-topo { background: #2f2f2f; border-bottom-color: rgba(255,255,255,.08); }
.tbr-porta-janela .tbr-nav-topo i { background: #4a4a4a; } .tbr-porta-janela .tbr-nav-topo span { background: #3a3a3a; }
.tbr-porta-janela img { display: block; width: 100%; height: auto !important; aspect-ratio: 16 / 10 !important; object-fit: cover; object-position: 0 0; }
.tbr-porta--cel { z-index: 2; }
.tbr-porta--cel .tbr-fone { position: relative; right: auto; top: auto; transform: none; margin-bottom: -6px; }
.tbr-monitor { width: 100%; display: grid; justify-items: center; transform: rotateY(-16deg) rotateX(3deg); transform-origin: 0 50%; }
.tbr-monitor-tela { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; border: 6px solid #0c0c0c; outline: 1px solid rgba(255,255,255,.16); background: #2A64CF url('/assets/hero-ceu-transbordo-1600.webp') center 30% / cover no-repeat; box-shadow: 0 34px 60px -28px rgba(0,0,0,.9); }
.tbr-monitor-tela tb-mascote { position: absolute; right: 7%; bottom: 8%; }
.tbr-monitor-chat { position: absolute; left: 7%; top: 12%; width: 50%; padding: 10px 11px 12px; border-radius: 12px; background: rgba(27,27,27,.9); border: 1px solid rgba(255,255,255,.14); display: grid; gap: 6px; box-shadow: 0 16px 30px -14px rgba(0,0,0,.7); }
.tbr-monitor-chat b { font-size: 11px; color: #F1F0EE; } .tbr-monitor-chat .tbr-l { background: rgba(255,255,255,.2); height: 5px; }
.tbr-monitor-pe { width: 26%; height: 16px; background: linear-gradient(180deg, #0c0c0c, #2a2a2a); clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%); }

/* ---------- para quem: os três serviços em miniatura ---------- */
.tbr-perfil--largo { grid-template-columns: minmax(0, 1fr) auto; }
.tbr-perfil-link { position: relative; display: inline-block; margin-top: 14px; font-size: 13.5px; font-weight: 700; color: #F1F0EE; text-decoration: underline; text-underline-offset: 4px; }
.tbr-perfil-servicos { position: relative; display: flex; align-items: flex-end; gap: 10px; }
.tbr-perfil-servicos figure { margin: 0; width: 116px; padding: 6px 6px 9px; border-radius: 14px; background: #fff; color: #1B1B1B; box-shadow: 0 22px 36px -18px rgba(0,0,0,.85); transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
.tbr-perfil-servicos figure:nth-child(1) { transform: rotate(-5deg) translateY(4px); } .tbr-perfil-servicos figure:nth-child(2) { transform: translateY(-8px); z-index: 1; } .tbr-perfil-servicos figure:nth-child(3) { transform: rotate(5deg) translateY(4px); }
.tbr-perfil-servicos figure:hover { transform: translateY(-12px) scale(1.05); z-index: 2; }
.tbr-perfil-servicos .tbr-mini { position: relative; display: block; height: 96px; border-radius: 9px; overflow: hidden; background: #F1EFF6; }
.tbr-perfil-servicos .tbr-mini img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tbr-perfil-servicos .tbr-play { width: 30px; height: 30px; margin: -15px 0 0 -15px; } .tbr-perfil-servicos .tbr-play::after { left: 11px; top: 8px; border-width: 6px; border-left-width: 10px; }
.tbr-mini--site { display: grid !important; gap: 5px; padding: 11px 10px; align-content: start; }
.tbr-mini--site i { display: block; border-radius: 3px; background: #cfc6ea; height: 6px; } .tbr-mini--site i:nth-child(1) { width: 46%; } .tbr-mini--site i:nth-child(2) { height: 30px; background: #8B5CF6; } .tbr-mini--site i:nth-child(3) { width: 80%; } .tbr-mini--site i:nth-child(4) { width: 60%; }
.tbr-perfil-servicos figcaption { margin-top: 7px; font-size: 11px; line-height: 1.2; font-weight: 700; text-align: center; }

@media (max-width: 900px) {
  .tbr-portas-palco { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 6px; }
  .tbr-porta { width: 100%; max-width: 340px; }
  .tbr-porta-janela, .tbr-monitor { transform: none; }
  .tbr-porta--cel { order: -1; }
  .tbr-porta--cel .tbr-fone { left: auto; margin-left: 0; }
  .tbr-perfil--largo { grid-template-columns: minmax(0, 1fr); }
  .tbr-perfil-servicos { justify-content: center; margin-top: 8px; } .tbr-perfil-servicos figure { width: 31%; max-width: 116px; }
}

/* ============================================================
   RODADA 5 (10/10) — PLANOS, nova abordagem: o card mostra só o que muda (preço e volume);
   o que é igual em todos fica num painel único embaixo. Preço, botão, links e o
   "Ver todas as ferramentas" continuam os mesmos (mesmos data-pf / data-plan / href).
   ============================================================ */
.tb-pricing-cards.tbr-planos { gap: 14px; align-items: stretch; }
.tb-pricing-cards.tbr-planos .tb-pricing-card { padding: 0; background: transparent; box-shadow: none; border-radius: 24px; }
.tb-pricing-cards.tbr-planos .tb-pricing-card-inner { min-height: 0; padding: 26px 24px 22px; border-radius: 24px; border: 1px solid #ebe9e4; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 24px 50px -30px rgba(20,24,40,.28); }
.tb-pricing-cards.tbr-planos .tb-pricing-card-inner:before { display: none; }
.tb-pricing-cards.tbr-planos .tb-plan-icon { background: #1B1B1B; box-shadow: none; }
.tb-pricing-cards.tbr-planos .tb-plan-price { margin-top: 20px; }
.tb-pricing-cards.tbr-planos .tb-plan-price strong { font-size: 56px; color: #1B1B1B; }
.tb-pricing-cards.tbr-planos .tb-credit-row { margin-top: 22px; min-height: 0; }
.tb-pricing-cards.tbr-planos .tb-credit-chip { background: transparent; border: 0; padding: 0; color: #1B1B1B; font-size: 15.5px; font-weight: 800; }
.tb-pricing-cards.tbr-planos .tb-credit-chip.bonus { background: #1B1B1B; color: #F1F0EE; padding: 4px 10px; font-size: 12px; }
.tbr-plano-volume { height: 8px; margin-top: 10px; border-radius: 99px; background: #ECEAE5; overflow: hidden; }
.tbr-plano-volume i { display: block; height: 100%; width: 12.5%; border-radius: 99px; background: #1B1B1B; transition: width .9s cubic-bezier(.16,1,.3,1); }
.tb-pricing-cards.tbr-planos .tb-pricing-card:nth-of-type(2) .tbr-plano-volume i { width: 27%; }
.tb-pricing-cards.tbr-planos .tb-pricing-card:nth-of-type(3) .tbr-plano-volume i { width: 50%; }
.tb-pricing-cards.tbr-planos .tb-pricing-card:nth-of-type(4) .tbr-plano-volume i { width: 100%; }
.tb-pricing-cards.tbr-planos .tb-plan-tag { margin-top: 10px; color: #6f6a62; }
.tb-pricing-cards.tbr-planos .tb-plan-cta { background: #fff; border: 1.5px solid #1B1B1B; color: #1B1B1B; font-weight: 700; }
.tb-pricing-cards.tbr-planos .tb-plan-cta span { color: inherit; }
.tb-pricing-cards.tbr-planos .tb-plan-cta:hover { background: #1B1B1B; color: #fff; border-color: #1B1B1B; }
.tb-pricing-cards.tbr-planos .tb-trust-row { margin: 16px -24px 0; padding: 14px 24px 0; }
.tb-pricing-cards.tbr-planos .tb-plan-badge { background: #1B1B1B; color: #F1F0EE; border-color: #1B1B1B; }
/* o plano em destaque: borda preta, botão cheio e um pedaço do céu no topo */
.tb-pricing-cards.tbr-planos .tb-pricing-card.tb-plan-destaque { background: transparent; padding: 0; translate: 0 -10px; }
.tb-pricing-cards.tbr-planos .tb-plan-destaque .tb-pricing-card-inner { border: 2px solid #1B1B1B; background: linear-gradient(180deg, #D9E8FD 0%, #fff 34%); box-shadow: 0 40px 70px -34px rgba(20,60,140,.5); }
.tb-pricing-cards.tbr-planos .tb-plan-destaque .tb-plan-cta { background: #1B1B1B; color: #fff; }

/* o painel único: o que vem em todo plano */
.tbr-todos { position: relative; display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); align-items: center; gap: clamp(18px, 3vw, 40px); margin-top: 18px; padding: clamp(24px, 3vw, 36px); border-radius: 24px; background: #1B1B1B; color: #F1F0EE; overflow: hidden; box-shadow: 0 40px 70px -40px rgba(20,24,40,.6); }
.tbr-todos::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 50% 90% at 100% 0%, rgba(61,134,245,.32), transparent 70%), radial-gradient(ellipse 40% 70% at 0% 100%, rgba(184,149,106,.22), transparent 70%); }
.tbr-todos > * { position: relative; min-width: 0; }
.tbr-todos-texto h3 { margin: 10px 0 0; font-size: clamp(26px, 3vw, 38px); line-height: 1.04; letter-spacing: -0.035em; font-weight: 800; }
.tbr-todos-texto h3 em { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 400; color: #F5D9A8; }
.tbr-todos-texto p { margin: 12px 0 0; font-size: 15px; line-height: 1.5; color: rgba(241,240,238,.72); }
.tbr-todos-itens { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.tbr-todos-bloco > b { display: block; font-size: 13px; font-weight: 700; color: rgba(241,240,238,.66); }
.tbr-todos-bloco .tbr-junta-rostos { margin-top: 8px; }
.tbr-todos-bloco .tbr-esteira { margin-top: 10px; }
.tbr-todos-produtos { display: flex; flex-wrap: wrap; gap: 8px; }
.tbr-todos-produtos span { display: inline-flex; align-items: center; gap: 8px; padding: 5px 15px 5px 6px; border-radius: 99px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); font-size: 13.5px; font-weight: 700; white-space: nowrap; transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.tbr-todos-produtos span:hover { transform: translateY(-3px); }
.tbr-todos-produtos img { width: 36px; height: 36px; object-fit: contain; }
@media (max-width: 900px) { .tbr-todos { grid-template-columns: minmax(0, 1fr); } .tb-pricing-cards.tbr-planos .tb-pricing-card.tb-plan-destaque { translate: 0 0; } }

/* ============================================================
   RODADA 6 (10/10)
   ============================================================ */
/* ROLAGEM: as dobras fora da tela são "puladas" pelo navegador (content-visibility) com altura estimada de 900px.
   Com "auto", ele passa a lembrar a altura real de cada dobra já vista, e ela não muda de tamanho quando volta. */
section[data-screen-label]:not(#top) { contain-intrinsic-size: auto 900px !important; }

/* ---------- onde você usa: três cartões desenhados (sem print de tela) ---------- */
.tbr-portas2-cabeca { text-align: center; padding: clamp(40px, 5vw, 64px) 20px 0; }
.tbr-subtitulo { margin: 10px 0 0; font-size: clamp(28px, 3.6vw, 46px); line-height: 1.02; letter-spacing: -0.04em; font-weight: 800; color: #1B1B1B; }
.tbr-subtitulo em { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 400; letter-spacing: -0.02em; color: #B8956A; }
.tbr-v-web, .tbr-v-cel, .tbr-v-desk { display: grid; place-items: center; height: 300px; overflow: hidden; }
.tbr-web { width: 86%; transform: perspective(900px) rotateX(5deg) rotate(-1.2deg); }
.tbr-web-corpo { display: grid; grid-template-columns: 46px minmax(0, 1fr); min-height: 176px; }
.tbr-web-trilho { display: grid; align-content: start; gap: 7px; padding: 10px 8px; background: #F5F4F1; border-right: 1px solid #ebe9e4; }
.tbr-web-trilho img { width: 30px; height: 30px; object-fit: contain; }
.tbr-web-trilho img:nth-child(1) { animation: tbrPulsa 3.2s ease-in-out infinite; }
.tbr-web-area { display: grid; align-content: start; gap: 10px; padding: 12px; min-width: 0; }
.tbr-web-area .tbr-pedido { max-width: none; }
.tbr-web-saida { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.tbr-web-saida img { width: 100%; height: 78px; object-fit: cover; border-radius: 8px; animation: tbrMostra 7s cubic-bezier(.16,1,.3,1) infinite; }
.tbr-web-saida img:nth-child(2) { animation-delay: .18s; } .tbr-web-saida img:nth-child(3) { animation-delay: .36s; }
@keyframes tbrMostra { 0%, 30% { opacity: 0; scale: .86; } 40%, 92% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1; } }
.tbr-v-cel { place-items: start center; }
.tbr-v-cel .tbr-fone { position: relative !important; right: auto !important; left: auto !important; top: auto !important; margin: 14px 0 0 !important; transform: none; transform-origin: 50% 0; scale: .66; flex: none; animation: none; }
.tbr-v-desk .tbr-monitor { width: 78%; transform: none; }
.tbr-portas2-fecho { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 0; padding: 2px 16px clamp(24px, 3vw, 34px); font-size: 15px; font-weight: 700; color: #1B1B1B; }
.tbr-portas2-fecho i { width: 8px; height: 8px; border-radius: 50%; background: #2FB36B; box-shadow: 0 0 0 4px rgba(47,179,107,.2); }

/* ---------- planos: etiquetas diferentes e âncora no Prosperidade ---------- */
.tb-pricing-cards.tbr-planos .tb-plan-destaque .tb-plan-badge { left: 50%; right: auto; top: -16px; translate: -50% 0; padding: 9px 18px 9px 13px; font-size: 12.5px; letter-spacing: .06em; background: #1B1B1B; color: #fff; border-color: #1B1B1B; box-shadow: 0 14px 24px -10px rgba(0,0,0,.6); white-space: nowrap; }
.tb-pricing-cards.tbr-planos .tb-plan-destaque .tb-plan-badge::before { content: "★"; margin-right: 7px; color: #FFC871; }
.tb-pricing-cards.tbr-planos .tb-pricing-card:not(.tb-plan-destaque) .tb-plan-badge { background: #fff; color: #6f6a62; border: 1px dashed #cfcbc3; font-weight: 600; box-shadow: none; }
.tbr-plano-melhor { display: none; }
.tb-plan-destaque .tbr-plano-melhor { display: inline-flex; align-self: flex-start; align-items: center; gap: 7px; margin-top: 12px; padding: 6px 12px 6px 10px; border-radius: 99px; background: #E7F6EE; border: 1px solid #c9ebd8; color: #1B7A47; font-size: 12.5px; font-weight: 800; }
.tb-plan-destaque .tbr-plano-melhor::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2FB36B; }
.tb-pricing-cards.tbr-planos .tb-plan-destaque .tb-plan-price strong { font-size: 64px; }
.tb-pricing-cards.tbr-planos .tb-pricing-card:not(.tb-plan-destaque) .tb-pricing-card-inner { background: #FCFCFB; }

/* ---------- planos: "ver todas as ferramentas" abre um painel único embaixo dos cards ---------- */
.tbr-ferramentas { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s cubic-bezier(.16,1,.3,1), margin-top .55s cubic-bezier(.16,1,.3,1); }
.tbr-ferramentas.aberto { grid-template-rows: 1fr; margin-top: 16px; }
.tbr-ferramentas-miolo { min-height: 0; overflow: hidden; }
.tbr-ferramentas-caixa { padding: clamp(20px, 3vw, 32px); border-radius: 24px; background: #fff; border: 1px solid #ebe9e4; box-shadow: 0 24px 50px -30px rgba(20,24,40,.28); }
.tbr-ferramentas-topo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 20px; }
.tbr-ferramentas-topo b { font-size: 22px; letter-spacing: -0.03em; color: #1B1B1B; }
.tbr-ferramentas-topo span { font-size: 14px; color: #6f6a62; }
.tbr-ferramentas-topo button { margin-left: auto; padding: 8px 15px; border-radius: 99px; border: 1px solid #1B1B1B; background: #fff; color: #1B1B1B; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.tbr-ferramentas-topo button:hover { background: #1B1B1B; color: #fff; }
.tbr-ferramentas-lista { columns: 4 210px; column-gap: 30px; }
.tbr-ferramentas-lista > div { break-inside: avoid; margin-bottom: 20px; }

/* ============================================================
   RODADA 8 (10/10)
   ============================================================ */
/* planos: os valores trocam com suavidade entre Mensal e Trimestral (o JS em tb-rebrand.js põe a classe) */
@keyframes tbrTroca { from { opacity: 0; translate: 0 10px; filter: blur(5px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }
.tbr-troca { animation: tbrTroca .5s cubic-bezier(.16,1,.3,1) both; }

/* ---------- canal do YouTube ---------- */
.tbr-yt { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; gap: clamp(26px, 4.5vw, 64px); padding: clamp(46px, 6vw, 78px) clamp(10px, 2vw, 22px) clamp(40px, 5vw, 62px); }
.tbr-yt-palco { position: relative; }
.tbr-yt-player { position: relative; display: block; padding: 10px 10px 6px; border-radius: 24px; background: #1B1B1B; color: #F1F0EE; text-decoration: none; box-shadow: 0 46px 80px -40px rgba(20,24,40,.75); transform: perspective(1300px) rotateY(8deg) rotateX(2deg); transition: transform .6s cubic-bezier(.16,1,.3,1); }
.tbr-yt-player:hover { transform: perspective(1300px) rotateY(0) rotateX(0); }
.tbr-yt-capa { position: relative; display: block; border-radius: 16px; overflow: hidden; }
.tbr-yt-capa img { display: block; width: 100%; height: auto !important; aspect-ratio: 16 / 9 !important; object-fit: cover !important; object-position: 50% 14%; border-radius: 0 !important; }
.tbr-yt-play { position: absolute; left: 50%; top: 50%; width: 82px; height: 56px; margin: -28px 0 0 -41px; border-radius: 18px; background: #FF0033; box-shadow: 0 18px 34px -12px rgba(255,0,51,.7); transition: scale .3s cubic-bezier(.34,1.56,.64,1); }
.tbr-yt-play::after { content: ""; position: absolute; left: 33px; top: 17px; border: 11px solid transparent; border-left: 18px solid #fff; border-right: 0; }
.tbr-yt-play::before { content: ""; position: absolute; inset: -9px; border-radius: 24px; border: 2px solid rgba(255,0,51,.5); animation: tbrYtPulso 2.2s ease-out infinite; }
@keyframes tbrYtPulso { from { transform: scale(.9); opacity: 1; } to { transform: scale(1.3); opacity: 0; } }
.tbr-yt-player:hover .tbr-yt-play { scale: 1.1; }
.tbr-yt-barra { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 12px 8px 8px; font-size: 12.5px; font-weight: 600; }
.tbr-yt-barra i { height: 4px; border-radius: 99px; background: rgba(255,255,255,.16); position: relative; overflow: hidden; }
.tbr-yt-barra i::after { content: ""; position: absolute; inset: 0; width: 34%; border-radius: 99px; background: #FF0033; }
.tbr-yt-barra span { color: rgba(241,240,238,.7); }
.tbr-yt-masc { position: absolute; z-index: 2; }
.tbr-yt-masc--1 { right: -22px; bottom: -34px; }
.tbr-yt-masc--2 { left: -26px; top: -44px; }
.tbr-yt-texto .tbr-titulo { font-size: clamp(30px, 3.8vw, 50px); margin-top: 12px; }
.tbr-yt-texto > p { margin: 16px 0 0; max-width: 46ch; font-size: 16.5px; line-height: 1.55; color: #55504A; }
.tbr-yt-texto ul { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 12px; }
.tbr-yt-texto li { display: grid; grid-template-columns: 16px 1fr; gap: 11px; align-items: start; font-size: 15px; line-height: 1.45; color: #5d5852; }
.tbr-yt-texto li .tbr-ok { margin-top: 3px; }
.tbr-yt-texto li b { color: #1B1B1B; }
.tbr-yt-botao { display: inline-flex; align-items: center; gap: 11px; margin-top: 26px; padding: 14px 24px 14px 16px; border-radius: 99px; background: #1B1B1B; color: #fff; font-size: 15px; font-weight: 700; text-decoration: none; box-shadow: 0 18px 34px -16px rgba(0,0,0,.6); transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
.tbr-yt-botao:hover { transform: translateY(-3px); }
.tbr-yt-botao i { width: 30px; height: 21px; border-radius: 7px; background: #FF0033; position: relative; flex: none; }
.tbr-yt-botao i::after { content: ""; position: absolute; left: 12px; top: 6px; border: 4.5px solid transparent; border-left: 8px solid #fff; border-right: 0; }
@media (max-width: 900px) { .tbr-yt { grid-template-columns: minmax(0, 1fr); } .tbr-yt-player, .tbr-yt-player:hover { transform: none; } .tbr-yt-masc--1 { right: -6px; --tbm-tamanho: 96px !important; } .tbr-yt-masc--2 { left: -6px; top: -36px; --tbm-tamanho: 88px !important; } }

/* ============================================================
   RODADA 9 (10/10) — TRANSBORDO DESKTOP, refeita do zero
   A ideia: mostrar que a Transbordo fica INSTALADA no computador da pessoa e trabalha nos arquivos dela.
   Um monitor com a área de trabalho: o Bordo, a conversa e a pasta da empresa ganhando arquivos.
   Tudo desenhado em CSS; a cena é um ciclo de 13s só com opacidade e posição.
   ============================================================ */
.tbr-desk .tbr-cabeca { padding-bottom: clamp(18px, 2.5vw, 28px); }
.tbr-pc-area { position: relative; padding: 8px clamp(10px, 2vw, 22px) 0; }
.tbr-pc-area::before { content: ""; position: absolute; left: 4%; right: 4%; top: 6%; bottom: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 60% 55% at 50% 45%, rgba(61,134,245,.26), transparent 70%); }
.tbr-pc { position: relative; z-index: 1; width: min(1000px, 100%); margin: 0 auto; display: grid; justify-items: center; }
.tbr-pc-tela { position: relative; width: 100%; aspect-ratio: 16 / 9.7; border-radius: 22px; overflow: hidden; border: 10px solid #0e0e0e; outline: 1px solid rgba(0,0,0,.5); background: #2A64CF; box-shadow: 0 60px 110px -50px rgba(20,40,90,.75), 0 0 0 1px rgba(255,255,255,.06) inset; container-type: inline-size; }
.tbr-pc-tela > * { font-size: clamp(7px, 1.32cqw, 13.5px); }
.tbr-pc-fundo { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; object-position: 50% 40%; }
.tbr-pc-pe { width: 17%; height: 34px; background: linear-gradient(180deg, #0e0e0e, #3a3a3a); clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%); }
.tbr-pc-base { width: 30%; height: 9px; border-radius: 99px 99px 4px 4px; background: linear-gradient(180deg, #4a4a4a, #1b1b1b); box-shadow: 0 22px 30px -8px rgba(20,24,40,.45); }

/* barra de cima e dock */
.tbr-pc-barra { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 1.3em; padding: .55em 1.2em; background: rgba(27,27,27,.55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: #fff; font-weight: 600; }
.tbr-pc-barra b { font-weight: 800; }
.tbr-pc-barra span { opacity: .78; }
.tbr-pc-barra em { margin-left: auto; font-style: normal; display: inline-flex; align-items: center; gap: .5em; opacity: .9; }
.tbr-pc-barra em::before { content: ""; width: .55em; height: .55em; border-radius: 50%; background: #2FB36B; box-shadow: 0 0 0 .22em rgba(47,179,107,.3); }
.tbr-pc-dock { position: absolute; left: 50%; bottom: 2.4%; translate: -50% 0; display: flex; align-items: flex-end; gap: .7em; padding: .6em .8em; border-radius: 1.5em; background: rgba(255,255,255,.26); border: 1px solid rgba(255,255,255,.4); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.tbr-pc-dock i { position: relative; display: grid; place-items: center; width: 3.1em; height: 3.1em; border-radius: .85em; background: linear-gradient(160deg, #fff, #dfe6f3); box-shadow: 0 .5em 1em -.4em rgba(0,0,0,.45); }
.tbr-pc-dock i:nth-child(2) { background: linear-gradient(160deg, #9cc1ff, #5d8df0); } .tbr-pc-dock i:nth-child(4) { background: linear-gradient(160deg, #ffd08a, #f1a04a); } .tbr-pc-dock i:nth-child(5) { background: linear-gradient(160deg, #b9efd2, #55c08c); }
.tbr-pc-dock i.aberto { background: #1B1B1B; width: 3.9em; height: 3.9em; animation: tbrDockPula 13s cubic-bezier(.34,1.56,.64,1) infinite; }
.tbr-pc-dock i.aberto img { width: 76%; height: auto !important; }
.tbr-pc-dock i.aberto::after { content: ""; position: absolute; left: 50%; bottom: -.5em; width: .34em; height: .34em; margin-left: -.17em; border-radius: 50%; background: #fff; }
@keyframes tbrDockPula { 0%, 1%, 9%, 100% { translate: 0 0; } 3% { translate: 0 -1.1em; } 5% { translate: 0 0; } 7% { translate: 0 -.5em; } }

/* a pasta da empresa, ganhando arquivos */
.tbr-pc-pasta { position: absolute; left: 4.5%; top: 15%; width: 39%; border-radius: 1em; overflow: hidden; background: rgba(255,255,255,.94); border: 1px solid rgba(255,255,255,.8); box-shadow: 0 2.4em 4em -1.6em rgba(10,30,80,.6); color: #1B1B1B; }
.tbr-pc-pasta-topo { display: flex; align-items: center; gap: .45em; padding: .7em .9em; background: #f1efea; border-bottom: 1px solid #e3e0d9; font-weight: 700; }
.tbr-pc-pasta-topo i { width: .7em; height: .7em; border-radius: 50%; background: #d5d2cc; }
.tbr-pc-pasta-topo b { margin-left: .5em; }
.tbr-pc-pasta-topo span { margin-left: auto; font-weight: 600; color: #7a756d; font-size: .88em; }
.tbr-pc-pasta ul { list-style: none; margin: 0; padding: .7em; display: grid; gap: .45em; min-height: 12.6em; align-content: start; }
.tbr-pc-pasta li { display: grid; grid-template-columns: 2.1em 1fr auto; align-items: center; gap: .7em; padding: .55em .75em .55em .55em; border-radius: .7em; background: #F7F6F3; border: 1px solid #ebe9e4; font-weight: 600; }
.tbr-pc-pasta li > i { width: 2.1em; height: 2.5em; border-radius: .35em; background: linear-gradient(160deg, #fff, #e7e4dd); border: 1px solid #d9d6cf; position: relative; }
.tbr-pc-pasta li > i::after { content: ""; position: absolute; left: 22%; right: 22%; top: 30%; height: .16em; background: #c9c5bd; box-shadow: 0 .42em 0 #c9c5bd, 0 .84em 0 #c9c5bd; }
.tbr-pc-pasta li em { font-style: normal; padding: .2em .6em; border-radius: 99px; background: #E7F6EE; color: #1B7A47; font-size: .8em; font-weight: 800; }
.tbr-pc-pasta li.fixo { opacity: .62; } .tbr-pc-pasta li.fixo em { display: none; }
.tbr-pc-pasta li:nth-child(2) { animation: tbrDg 13s cubic-bezier(.34,1.3,.64,1) infinite; }
.tbr-pc-pasta li:nth-child(3) { animation: tbrDh 13s cubic-bezier(.34,1.3,.64,1) infinite; }
.tbr-pc-pasta li:nth-child(4) { animation: tbrDi 13s cubic-bezier(.34,1.3,.64,1) infinite; }

/* a conversa com o Bordo */
.tbr-pc-chat { position: absolute; right: 4.5%; top: 13%; width: 41%; padding: 1em; border-radius: 1.3em; background: rgba(27,27,27,.9); border: 1px solid rgba(255,255,255,.14); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 2.4em 4em -1.6em rgba(0,0,0,.8); color: #F1F0EE; display: grid; gap: .7em; }
.tbr-pc-chat-topo { display: flex; align-items: center; gap: .6em; font-weight: 800; }
.tbr-pc-chat-topo img { width: 2.2em; height: 2.2em !important; object-fit: contain; }
.tbr-pc-chat-topo span { margin-left: auto; font-weight: 600; font-size: .86em; color: rgba(241,240,238,.6); }
.tbr-pc-eu { justify-self: end; max-width: 92%; padding: .65em .9em; border-radius: 1.1em 1.1em .3em 1.1em; background: #F1F0EE; color: #1B1B1B; font-weight: 600; line-height: 1.3; animation: tbrDa 13s cubic-bezier(.16,1,.3,1) infinite; }
.tbr-pc-pensa { display: flex; align-items: center; gap: .55em; color: #F5D9A8; font-weight: 600; animation: tbrDb 13s cubic-bezier(.16,1,.3,1) infinite; }
.tbr-pc-pensa::before { content: "◆"; font-size: .8em; animation: tbrPiscaSuave 1.2s ease-in-out infinite; }
@keyframes tbrPiscaSuave { 50% { opacity: .3; } }
.tbr-pc-pronto { padding: .85em .9em .9em; border-radius: 1em; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); display: grid; gap: .5em; animation: tbrDc 13s cubic-bezier(.16,1,.3,1) infinite; }
.tbr-pc-pronto b { font-size: 1.06em; }
.tbr-pc-pronto p { margin: 0; color: rgba(241,240,238,.66); line-height: 1.35; font-size: .92em; }
.tbr-pc-pronto ul { list-style: none; margin: .2em 0 0; padding: 0; display: grid; gap: .45em; }
.tbr-pc-pronto li { display: grid; grid-template-columns: 1.25em 1fr; gap: .6em; align-items: center; font-weight: 600; line-height: 1.25; }
.tbr-pc-pronto li .tbr-ok { width: 1.25em; height: 1.25em; } .tbr-pc-pronto li .tbr-ok::after { left: .43em; top: .22em; width: .3em; height: .56em; border-width: 0 .15em .15em 0; }
.tbr-pc-pronto li:nth-child(1) { animation: tbrDd 13s cubic-bezier(.34,1.56,.64,1) infinite; }
.tbr-pc-pronto li:nth-child(2) { animation: tbrDe 13s cubic-bezier(.34,1.56,.64,1) infinite; }
.tbr-pc-pronto li:nth-child(3) { animation: tbrDf 13s cubic-bezier(.34,1.56,.64,1) infinite; }
.tbr-pc-masc { position: absolute; left: 33%; bottom: 15%; z-index: 3; --tbm-tamanho: clamp(54px, 13cqw, 132px); }
@keyframes tbrDa { 0%, 4% { opacity: 0; translate: 0 .7em; scale: .96; } 7%, 95% { opacity: 1; translate: 0 0; scale: 1; } 100% { opacity: 0; translate: 0 0; scale: 1; } }
@keyframes tbrDb { 0%, 24% { opacity: 0; translate: 0 .7em; scale: .96; } 27%, 95% { opacity: 1; translate: 0 0; scale: 1; } 100% { opacity: 0; translate: 0 0; scale: 1; } }
@keyframes tbrDc { 0%, 42% { opacity: 0; translate: 0 .7em; scale: .96; } 45%, 95% { opacity: 1; translate: 0 0; scale: 1; } 100% { opacity: 0; translate: 0 0; scale: 1; } }
@keyframes tbrDd { 0%, 49% { opacity: 0; translate: 0 .7em; scale: .96; } 52%, 95% { opacity: 1; translate: 0 0; scale: 1; } 100% { opacity: 0; translate: 0 0; scale: 1; } }
@keyframes tbrDe { 0%, 55% { opacity: 0; translate: 0 .7em; scale: .96; } 58%, 95% { opacity: 1; translate: 0 0; scale: 1; } 100% { opacity: 0; translate: 0 0; scale: 1; } }
@keyframes tbrDf { 0%, 61% { opacity: 0; translate: 0 .7em; scale: .96; } 64%, 95% { opacity: 1; translate: 0 0; scale: 1; } 100% { opacity: 0; translate: 0 0; scale: 1; } }
@keyframes tbrDg { 0%, 52% { opacity: 0; translate: 0 .7em; scale: .96; } 55%, 95% { opacity: 1; translate: 0 0; scale: 1; } 100% { opacity: 0; translate: 0 0; scale: 1; } }
@keyframes tbrDh { 0%, 58% { opacity: 0; translate: 0 .7em; scale: .96; } 61%, 95% { opacity: 1; translate: 0 0; scale: 1; } 100% { opacity: 0; translate: 0 0; scale: 1; } }
@keyframes tbrDi { 0%, 64% { opacity: 0; translate: 0 .7em; scale: .96; } 67%, 95% { opacity: 1; translate: 0 0; scale: 1; } 100% { opacity: 0; translate: 0 0; scale: 1; } }

/* etiquetas ao lado do monitor */
.tbr-pc-etq { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px 10px 12px; border-radius: 99px; background: #1B1B1B; color: #F1F0EE; font-size: 13.5px; font-weight: 700; white-space: nowrap; box-shadow: 0 18px 30px -14px rgba(20,24,40,.6); animation: tbrPulsa 4.6s ease-in-out infinite; }
.tbr-pc-etq i { width: 8px; height: 8px; border-radius: 50%; background: #2FB36B; }
.tbr-pc-etq--1 { left: -3%; bottom: 30%; } .tbr-pc-etq--2 { right: -3%; bottom: 13%; animation-delay: -2.2s; background: #fff; color: #1B1B1B; border: 1px solid #e7e5e0; }

/* os três pilares */
.tbr-pilares { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: clamp(26px, 3.5vw, 40px) clamp(10px, 2vw, 22px) 0; }
.tbr-pilar { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; padding: 20px; border-radius: 18px; background: #fff; border: 1px solid #ebe9e4; box-shadow: 0 18px 36px -28px rgba(20,24,40,.35); transition: transform .4s cubic-bezier(.16,1,.3,1); }
.tbr-pilar:hover { transform: translateY(-5px); }
.tbr-pilar > i { width: 44px; height: 44px; border-radius: 13px; background: #1B1B1B; color: #F5D9A8; display: grid; place-items: center; font-style: normal; font-size: 19px; }
.tbr-pilar h3 { margin: 0; font-size: 18px; letter-spacing: -0.025em; font-weight: 800; color: #1B1B1B; }
.tbr-pilar p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.45; color: #5d5852; }

/* o que ela faz, em linguagem simples (o nome técnico fica na etiqueta) */
.tbr-cap { position: relative; margin: 14px clamp(10px, 2vw, 22px) clamp(18px, 2.5vw, 28px); padding: clamp(26px, 3.5vw, 44px); border-radius: 24px; background: #1B1B1B; color: #F1F0EE; overflow: hidden; box-shadow: 0 40px 70px -40px rgba(20,24,40,.6); }
.tbr-cap::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 45% 60% at 100% 0%, rgba(61,134,245,.3), transparent 70%), radial-gradient(ellipse 40% 60% at 0% 100%, rgba(184,149,106,.22), transparent 70%); }
.tbr-cap > * { position: relative; }
.tbr-cap-topo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 18px 40px; }
.tbr-cap-topo h3 { margin: 8px 0 0; font-size: clamp(26px, 3vw, 38px); line-height: 1.04; letter-spacing: -0.035em; font-weight: 800; text-wrap: balance; }
.tbr-cap-topo p { margin: 0; font-size: 15.5px; line-height: 1.5; color: rgba(241,240,238,.72); }
.tbr-cap-grupos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 26px; }
.tbr-cap-grupo { padding: 16px 16px 8px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); }
.tbr-cap-grupo h4 { display: flex; align-items: center; gap: 9px; margin: 0 0 6px; font-size: 16px; letter-spacing: -0.02em; font-weight: 800; }
.tbr-cap-grupo h4 i { width: 26px; height: 26px; border-radius: 8px; background: #F1F0EE; color: #1B1B1B; display: grid; place-items: center; font-style: normal; font-size: 13px; }
.tbr-cap-grupo ul { list-style: none; margin: 0; padding: 0; }
.tbr-cap-grupo li { padding: 10px 0; border-top: 1px solid rgba(255,255,255,.08); font-size: 14px; line-height: 1.35; font-weight: 600; }
.tbr-cap-grupo li span { display: block; margin-top: 4px; font-size: 11px; font-weight: 600; letter-spacing: .03em; color: rgba(241,240,238,.45); }

@media (max-width: 1100px) { .tbr-pc-etq--1 { left: 0; } .tbr-pc-etq--2 { right: 0; } .tbr-cap-grupos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .tbr-pc-tela { aspect-ratio: 4 / 4.5; border-width: 6px; border-radius: 16px; }
  .tbr-pc-tela > * { font-size: clamp(9px, 3cqw, 13px); }
  .tbr-pc-pasta, .tbr-pc-barra span { display: none; }
  .tbr-pc-chat { left: 5%; right: 5%; width: auto; top: 11%; }
  .tbr-pc-masc { left: auto; right: 6%; bottom: 14%; --tbm-tamanho: 84px; }
  .tbr-pc-etq { position: static; margin: 0 4px 10px 0; animation: none; font-size: 12.5px; }
  .tbr-pc-etqs { display: flex; flex-wrap: wrap; justify-content: center; }
  .tbr-desk .tb-feature-pill { width: auto; max-width: 100%; font-size: 11.5px; padding: 8px 12px; text-align: left; }
  .tbr-pilares, .tbr-cap-topo { grid-template-columns: minmax(0, 1fr); }
  .tbr-cap-grupos { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   RODADA 10 — DESKTOP: a faixa dos provedores de modelo (logos do app, em public/assets/provedores/)
   ============================================================ */
.tbr-prov { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: clamp(18px, 3vw, 40px); margin: 14px clamp(10px, 2vw, 22px) 0; padding: clamp(22px, 3vw, 32px); border-radius: 22px; background: #fff; border: 1px solid #ebe9e4; box-shadow: 0 24px 50px -30px rgba(20,24,40,.28); }
.tbr-prov > * { min-width: 0; }
.tbr-prov h3 { margin: 8px 0 0; font-size: clamp(22px, 2.5vw, 30px); line-height: 1.08; letter-spacing: -0.03em; font-weight: 800; color: #1B1B1B; text-wrap: balance; }
.tbr-prov h3 em { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 400; color: #B8956A; }
.tbr-prov p { margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: #5d5852; }
.tbr-prov .tbr-esteira { margin-top: 0; }
.tbr-prov .tbr-esteira + .tbr-esteira { margin-top: 10px; }
.tbr-prov-chip { display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 7px; border-radius: 99px; background: #F7F6F3; border: 1px solid #ebe9e4; font-size: 14.5px; font-weight: 700; color: #1B1B1B; white-space: nowrap; }
.tbr-prov-chip img { width: 34px; height: 34px; padding: 6px; border-radius: 50%; background: #1B1B1B; object-fit: contain; }
.tbr-prov-chip--mais { padding: 7px 16px; background: #1B1B1B; color: #fff; border-color: #1B1B1B; }
@media (max-width: 900px) { .tbr-prov { grid-template-columns: minmax(0, 1fr); } }

/* ---------- responsivo e movimento reduzido (base) ---------- */
@media (max-width: 1080px) {
  .tbr-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tbr-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .tbr { padding-left: 12px; padding-right: 12px; }
  .tbr-cards--4, .tbr-cards--3, .tbr-cards--2 { grid-template-columns: minmax(0, 1fr); }
  .tbr-cards { padding-left: 4px; padding-right: 4px; }
  .tbr-sub { font-size: 16px; }
  .tbr-masc { right: -4px; }
}
@media (prefers-reduced-motion: reduce) {
  .tbr *, .tbr *::before, .tbr *::after { animation: none !important; }
  .tbr-pedido span { width: 100%; border-right: 0; }
  .tbr-aprova li i { transform: scale(1); }
}

/* ============================================================
   RODADA 13 (10/10)
   ============================================================ */
/* selo com duas partes ("Um dos modelos de negócio · Cash on Delivery"): no celular quebra em duas linhas em vez de vazar */
.tbr-selo-quebra { display: none; }
@media (max-width: 640px) {
  .tbr-cabeca .tb-feature-pill.tbr-selo-duplo { width: auto; max-width: 100%; align-items: flex-start; padding: 10px 16px 10px 14px; border-radius: 20px; text-align: left; line-height: 1.35; }
  .tbr-cabeca .tb-feature-pill.tbr-selo-duplo svg { flex: none; margin-top: 2px; }
  .tbr-selo-duplo .tbr-selo-quebra { display: inline; }
  .tbr-selo-duplo .tbr-selo-ponto { display: none; }
}


/* Planos: mesma escala compacta do banner da loja V3; preserva logos e esteiras. */
.tbr-todos{width:min(1080px,100%);min-height:174px;margin:18px auto 0;padding:18px 24px;gap:14px 24px}
.tbr-todos-texto h3{margin-top:8px;font-size:28px}
.tbr-todos-texto p{margin-top:8px;font-size:12.5px}
.tbr-todos-texto .tbr-passo{font-size:10px}
.tbr-todos-itens{gap:6px}
.tbr-todos-bloco > b{font-size:10px}
.tbr-todos-bloco:first-child{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px}
.tbr-todos-bloco .tbr-junta-rostos{margin-top:0}
.tbr-todos .tbr-junta-rostos img{width:24px;height:24px;margin-right:0}
.tbr-todos-bloco:not(:first-child) > b{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.tbr-todos-bloco .tbr-esteira{margin-top:0}
.tbr-todos .tbr-esteira > div{gap:5px}
.tbr-todos .tbr-modelo{height:25px;gap:5px;padding:0 9px 0 6px;border-radius:8px;font-size:10.5px}
.tbr-todos .tbr-modelo img{width:15px;height:15px}
.tbr-todos-produtos{gap:5px}
.tbr-todos-produtos span{height:25px;gap:5px;padding:0 9px 0 5px;font-size:10.5px}
.tbr-todos-produtos img{width:20px;height:20px}
@media (max-width:600px){.tbr-todos{padding:18px;gap:16px}.tbr-todos-texto h3{font-size:26px}}