/* ============================================================
   SEÇÃO: O QUE É A TRANSBORDO
   Manchete de um lado, palco do produto do outro. O palco mostra a
   tela INTEIRA em perspectiva (nunca um recorte cortado) com o
   contexto do negócio flutuando por cima.
   As linhas e os pontos são os da moldura TBF do site — este arquivo
   não desenha divisória nenhuma por conta própria.
   ============================================================ */

.tbq {
  position: relative;
  padding: clamp(84px, 10vw, 148px) 20px 0;
}

/* ---------- Faixa 1: manchete + palco ---------- */
.tbq-duo {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  padding: clamp(46px, 6vw, 82px) clamp(16px, 3vw, 36px) clamp(52px, 6.5vw, 90px);
}

.tbq-copy { position: relative; }

/* ---------- Manchete com preenchimento por rolagem ---------- */
.tbq-frase {
  position: relative;
  margin: 20px 0 0;
  font-size: clamp(32px, 4.6vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.04em;
  font-weight: 800;
  text-wrap: balance;
}

.tbq-frase-base { color: #C9C1B4; }

.tbq-frase-luz {
  position: absolute;
  inset: 0;
  color: #1C1A16;
  clip-path: inset(100% 0 0 0);
  will-change: clip-path;
}

.tbq-frase em {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.025em;
}

.tbq-frase-luz em { color: #B8956A; }

.tbq-sub {
  margin: 20px 0 0;
  max-width: 46ch;
  font-size: clamp(15px, 2.2vw, 17px);
  line-height: 1.6;
  color: #6f6f6f;
  text-wrap: pretty;
}

.tbq-sub strong { color: #1C1A16; font-weight: 700; }

/* ============================================================
   O PALCO
   ============================================================ */
.tbq-palco {
  position: relative;
  min-height: clamp(320px, 34vw, 470px);
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1700px;
}

/* luz quente por trás — só atmosfera, nunca toca o conteúdo */
.tbq-halo {
  position: absolute;
  inset: -14% -8%;
  background:
    radial-gradient(ellipse 62% 58% at 58% 46%, rgba(212, 165, 116, 0.12), transparent 66%),
    radial-gradient(ellipse 46% 44% at 26% 76%, rgba(255, 255, 255, 0.75), transparent 70%);
  filter: blur(22px);
  pointer-events: none;
}

/* discos concêntricos girando atrás da tela */
.tbq-discos {
  position: absolute;
  top: 50%;
  left: 52%;
  width: min(560px, 96%);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.tbq-discos i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(28, 26, 22, 0.1);
  animation: tbqGira 46s linear infinite;
}

.tbq-discos i:nth-child(2) {
  inset: 13%;
  border-style: dashed;
  border-color: rgba(28, 26, 22, 0.08);
  animation-duration: 32s;
  animation-direction: reverse;
}

.tbq-discos i:nth-child(3) {
  inset: 27%;
  border-color: rgba(28, 26, 22, 0.06);
  animation-duration: 58s;
}

@keyframes tbqGira { to { transform: rotate(360deg); } }

/* a tela do produto, inteira, deitada em perspectiva */
.tbq-tela {
  position: relative;
  width: min(112%, 640px);
  transform: rotateY(-15deg) rotateX(7deg) rotate(0.6deg);
  transform-style: preserve-3d;
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 14px;
  background: #0B0B0B;
  padding: 7px;
  border: 1px solid rgba(28, 26, 22, 0.16);
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.5) inset,
    -26px 44px 80px -30px rgba(28, 26, 22, 0.55),
    -8px 16px 30px -18px rgba(28, 26, 22, 0.4);
}

.tbq-palco:hover .tbq-tela { transform: rotateY(-10deg) rotateX(4deg) rotate(0.2deg); }

.tbq-tela img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 9px;
}

/* ---------- Etiquetas do contexto flutuando ---------- */
.tbq-etiqueta {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #e4e4e4;
  box-shadow: 0 10px 26px -12px rgba(28, 26, 22, 0.28), 0 2px 5px rgba(28, 26, 22, 0.05);
  font-size: 13px;
  font-weight: 700;
  color: #1C1A16;
  white-space: nowrap;
  animation: tbqFlutua 6.5s ease-in-out infinite;
}

.tbq-etiqueta::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c5c0b7;
  box-shadow: 0 0 0 3px rgba(28, 26, 22, 0.06);
}

.tbq-etiqueta--a { top: 14%;    left: 3%;     animation-delay: 0s; }
.tbq-etiqueta--f { top: 19%;    right: -2%;   animation-delay: 0.7s; }
.tbq-etiqueta--b { top: 38%;    right: -8%;   animation-delay: 1.4s; }
.tbq-etiqueta--d { bottom: 11%; right: 2%;    animation-delay: 2.1s; }
.tbq-etiqueta--g { bottom: 1%;  left: 22%;    animation-delay: 2.8s; }
.tbq-etiqueta--c { bottom: 24%; left: -7%;    animation-delay: 3.5s; }
.tbq-etiqueta--e { top: 40%;    left: -10%;   animation-delay: 4.2s; }

@keyframes tbqFlutua {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(7px, -8px); }
  50%  { transform: translate(0, -12px); }
  75%  { transform: translate(-7px, -6px); }
  100% { transform: translate(0, 0); }
}

/* selo do DNA */
.tbq-selo {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: -14px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 20px;
  border-radius: 999px;
  background: #1C1A16;
  color: #E8C49A;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 16px 34px -16px rgba(28, 26, 22, 0.7);
}

.tbq-selo i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7BA88C;
  animation: tbqPulso 2.2s ease-in-out infinite;
}

@keyframes tbqPulso {
  0%, 100% { opacity: 0.5; transform: scale(0.85); }
  50%      { opacity: 1;   transform: scale(1.2); }
}

/* ============================================================
   Faixa 2: três cards com arte própria
   ============================================================ */
.tbq-provas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding: clamp(34px, 4.4vw, 54px) clamp(16px, 3vw, 36px) clamp(40px, 5vw, 62px);
}

.tbq-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid #e4e4e4;
  transition:
    background 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* No hover muda só o fundo e a borda — nada de luz seguindo o cursor */
.tbq-card:hover {
  background: #ffffff;
  border-color: #d2cdc4;
}

.tbq-card-topo {
  position: relative;
  z-index: 1;
  padding: clamp(26px, 3vw, 34px) clamp(22px, 2.6vw, 30px) 0;
}

.tbq-card-num {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: #B8956A;
  margin-bottom: 14px;
}

.tbq-card-t {
  margin: 0 0 10px;
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #1C1A16;
  line-height: 1.14;
  text-wrap: balance;
}

.tbq-card-d {
  margin: 0;
  font-size: clamp(14px, 1.8vw, 15.5px);
  line-height: 1.6;
  color: #6f6f6f;
  text-wrap: pretty;
}

/* ---------- Artes dos cards ---------- */
.tbq-arte {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  margin-top: auto;
  padding: clamp(18px, 2.4vw, 26px) 0 0;
  overflow: visible;
}

/* 01 — a ficha preenchida uma vez */
.fi-folha > rect:first-child {
  fill: #ffffff;
  stroke: #e4e4e4;
  stroke-width: 1.6;
  filter: drop-shadow(0 12px 22px rgba(28, 26, 22, 0.1));
}

.fi-campo { fill: #e4e4e4; animation: fiCampo 5s ease-in-out infinite; }
.fi-campo-2 { animation-delay: 0.5s; }
.fi-campo-3 { animation-delay: 1s; }
.fi-campo-4 { animation-delay: 1.5s; }

.fi-selo circle { fill: #1C1A16; }
.fi-selo path { fill: none; stroke: #E8C49A; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.fi-selo { transform-box: fill-box; transform-origin: center; animation: fiSelo 5s ease-in-out infinite; }

.fi-caneta path {
  fill: #f0efec;
  stroke: #b9b4ab;
  stroke-width: 1.8;
  stroke-linejoin: round;
}

.fi-caneta { transform-box: fill-box; transform-origin: center; animation: fiCaneta 5s ease-in-out infinite; }

@keyframes fiCampo  { 0%, 12% { opacity: 0.25; } 34%, 100% { opacity: 1; } }
@keyframes fiSelo   { 0%, 60% { opacity: 0; transform: scale(0.7); } 74%, 100% { opacity: 1; transform: scale(1); } }
@keyframes fiCaneta { 0% { transform: translate(6px, 8px) rotate(-6deg); } 40% { transform: translate(-4px, 46px) rotate(-2deg); } 70%, 100% { transform: translate(14px, 2px) rotate(-10deg); opacity: 0.35; } }

/* 02 — o núcleo alimentando os agentes */
.re-fio {
  fill: none;
  stroke: #c5c0b7;
  stroke-width: 1.8;
  stroke-dasharray: 3 9;
  stroke-linecap: round;
  animation: reFio 2.6s linear infinite;
}

.re-agente rect {
  fill: #ffffff;
  stroke: #e4e4e4;
  stroke-width: 1.6;
  filter: drop-shadow(0 6px 14px rgba(28, 26, 22, 0.1));
}

.re-agente { transform-box: fill-box; transform-origin: center; animation: reAgente 3.2s ease-in-out infinite; }
.re-agente:nth-of-type(2) { animation-delay: 0.3s; }
.re-agente:nth-of-type(3) { animation-delay: 0.6s; }
.re-agente:nth-of-type(4) { animation-delay: 0.9s; }
.re-agente:nth-of-type(5) { animation-delay: 1.2s; }
.re-agente:nth-of-type(6) { animation-delay: 1.5s; }

.re-bola { fill: #1C1A16; }
.re-nucleo image { opacity: 0.96; }

.re-agente text {
  fill: #6f6f6f;
  font-size: 11px;
  font-weight: 700;
  font-family: 'Uncut Sans', system-ui, sans-serif;
}

.re-aro {
  fill: none;
  stroke: #b9b4ab;
  stroke-width: 2;
  stroke-dasharray: 26 160;
  stroke-linecap: round;
  animation: reAro 4.4s linear infinite;
}

@keyframes reFio    { to { stroke-dashoffset: -24; } }
@keyframes reAro    { to { stroke-dashoffset: -186; } }
@keyframes reAgente { 0%, 100% { opacity: 0.78; } 50% { opacity: 1; } }

/* 03 — as duas portas sincronizadas */
.po-janela > rect:first-child {
  fill: #ffffff;
  stroke: #e4e4e4;
  stroke-width: 1.6;
  filter: drop-shadow(0 12px 22px rgba(28, 26, 22, 0.1));
}

.po-barra { fill: none; stroke: #ededed; stroke-width: 1.6; }
.po-janela circle { fill: #dcdcdc; }
.po-linha { fill: #ececec; }
.po-desk > rect:first-child { fill: #1C1A16; stroke: rgba(255, 255, 255, 0.18); }
.po-desk .po-barra { stroke: rgba(255, 255, 255, 0.12); }
.po-desk circle { fill: rgba(255, 255, 255, 0.4); }
.po-desk .po-linha { fill: rgba(255, 255, 255, 0.14); }

.po-sinc {
  fill: none;
  stroke: #c5c0b7;
  stroke-width: 2;
  stroke-dasharray: 3 8;
  stroke-linecap: round;
  animation: poSinc 2.2s linear infinite;
}

.po-sinc-volta { animation-direction: reverse; }

.po-chave rect { fill: #ffffff; stroke: #e4e4e4; stroke-width: 1.6; }
.po-led { fill: #7BA88C; animation: poLed 2s ease-in-out infinite; }

@keyframes poSinc { to { stroke-dashoffset: -22; } }
@keyframes poLed  { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }

/* ---------- Responsivo ---------- */
@media (max-width: 1000px) {
  .tbq-duo { grid-template-columns: 1fr; gap: clamp(46px, 8vw, 70px); }
  .tbq-palco { min-height: 300px; }
  .tbq-tela { width: min(100%, 520px); transform: rotateY(-9deg) rotateX(5deg); }
}

@media (max-width: 760px) {
  .tbq-provas { grid-template-columns: 1fr; gap: 14px; }
  .tbq-tela { transform: none; width: 100%; }
  /* Seis etiquetas não cabem numa tela de celular: as duas de menor peso
     saem, e as quatro que ficam são trazidas para dentro da borda. */
  .tbq-etiqueta { font-size: 12px; padding: 7px 13px; }
  .tbq-etiqueta--c,
  .tbq-etiqueta--e,
  .tbq-etiqueta--g { display: none; }
  .tbq-etiqueta--a { top: 0;      left: 0;    right: auto; }
  .tbq-etiqueta--b { top: 30%;    right: 0;   left: auto; }
  .tbq-etiqueta--f { bottom: 24%; left: 0;    right: auto; top: auto; }
  .tbq-etiqueta--d { bottom: 2%;  right: 0;   left: auto; }
  .tbq-palco { min-height: 340px; padding: 30px 0 18px; }
  .tbq-discos { width: 124%; }
}

@media (prefers-reduced-motion: reduce) {
  .fi-campo, .fi-selo, .fi-caneta, .re-fio, .re-aro, .re-agente, .po-sinc, .po-led { animation: none; }
  .fi-selo { opacity: 1; }
  .tbq-card { transition: none; }
  .tbq-frase-luz { clip-path: none !important; }
  .tbq-frase-base { visibility: hidden; }
  .tbq-discos i, .tbq-etiqueta, .tbq-selo i { animation: none; }
  .tbq-tela { transition: none; }
}