/* ============================================================
   SEÇÃO: A SUA OPORTUNIDADE (protótipo v3)
   Cartões estilo Conty: mini interface em cima, texto embaixo.
   Moldura: só a TBF da casa (sem .tbf-vlines na faixa de cartões).
   ============================================================ */

.tbo { padding: clamp(84px, 10vw, 140px) 20px clamp(70px, 8vw, 110px); }

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

/* ---------- cartões ---------- */
.tbo-cards {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start;
  padding: clamp(28px, 4vw, 44px) clamp(12px, 2vw, 24px);
}
.tbo-card {
  background: #fff; border: 1px solid #ebe9e4; border-radius: 18px; overflow: hidden;
  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);
}
.tbo-card:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 34px 60px -30px rgba(20,24,40,.36); }

.tbo-visual {
  position: relative; height: 290px; overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(125,176,241,.22), transparent 60%),
    radial-gradient(ellipse at 100% 100%, rgba(184,149,106,.16), transparent 55%),
    #F4F3F0;
  border-bottom: 1px solid #eeece7;
}

/* 01 · serviço: foto → vídeo */
.tbo-visual--servico { display: flex; align-items: center; justify-content: center; gap: 14px; }
.tbo-foto { margin: 0; transform: rotate(-5deg); text-align: center; }
.tbo-foto img {
  display: block; width: 112px; height: 140px; object-fit: cover; border-radius: 12px; border: 4px solid #fff;
  box-shadow: 0 16px 30px -14px rgba(20,24,40,.4);
}
.tbo-foto figcaption { margin-top: 8px; font-size: 11px; font-weight: 600; color: #6f6a62; }
.tbo-seta { font-size: 26px; color: #B8956A; font-weight: 700; }
.tbo-celular {
  position: relative; width: 134px; height: 238px; border-radius: 22px; padding: 6px; background: #0B0B0B;
  box-shadow: 0 24px 40px -18px rgba(20,24,40,.55);
}
.tbo-celular-tela {
  position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer;
  border-radius: 17px; overflow: hidden; background: #222;
}
.tbo-celular-tela img, .tbo-celular-tela video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tbo-celular-tela video { z-index: 1; }
.tbo-celular .tbv-play { transform: scale(.78); }
.tbo-celular .tbv-som { right: 10px; top: 10px; width: 32px; height: 32px; background-size: 15px; }
[data-tbv-card].is-tocando .tbv-play { opacity: 0; }

/* 02 · sistemas: app + terminal + pet */
.tbo-visual--sistema { display: flex; align-items: center; justify-content: center; }
.tbo-app {
  width: 78%; border-radius: 12px; background: #fff; border: 1px solid #e7e5e0; overflow: hidden;
  box-shadow: 0 20px 40px -22px rgba(20,24,40,.4); transform: translateY(-14px);
}
.tbo-app-barra { display: flex; align-items: center; gap: 5px; padding: 9px 12px; border-bottom: 1px solid #efede8; font-size: 11px; font-weight: 600; color: #6f6a62; }
.tbo-app-barra i { width: 7px; height: 7px; border-radius: 50%; background: #e2dfd9; }
.tbo-app-barra span { margin-left: 6px; }
.tbo-app-corpo { padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.tbo-slot { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 9px; background: #F7F6F3; font-size: 12px; color: #1C1A16; }
.tbo-slot b { font-weight: 700; }
.tbo-slot em { font-style: normal; font-size: 10px; font-weight: 700; color: #2FB36B; background: rgba(47,179,107,.12); padding: 3px 7px; border-radius: 999px; }
.tbo-slot--livre { background: #fff; border: 1px dashed #d9d5ce; }
.tbo-slot--livre em { color: #fff; background: #0B0B0B; }
.tbo-terminal {
  position: absolute; left: 9%; bottom: 22px; padding: 9px 13px; border-radius: 10px; background: #0E0E10; color: #E8E6E1;
  font-family: Menlo, monospace; font-size: 12px; box-shadow: 0 14px 30px -14px rgba(0,0,0,.6);
}
.tbo-terminal span { color: #C8A15F; }
.tbo-pet { position: absolute; right: 6%; bottom: 8px; width: 92px; height: 92px; animation: thcFlutua 4.4s ease-in-out infinite; }

/* 03 · vender: produto + pedido COD */
.tbo-visual--vender { display: flex; align-items: center; justify-content: center; gap: 0; }
.tbo-produto {
  width: 124px; height: 220px; object-fit: cover; border-radius: 16px; border: 4px solid #fff;
  box-shadow: 0 22px 40px -18px rgba(20,24,40,.5); transform: rotate(-4deg) translateX(18px); position: relative; z-index: 1;
}
.tbo-pedido {
  width: 190px; padding: 12px; border-radius: 14px; background: #fff; border: 1px solid #e7e5e0;
  box-shadow: 0 20px 40px -20px rgba(20,24,40,.45); transform: translateX(-6px) translateY(20px); position: relative; z-index: 2;
}
.tbo-pedido-topo { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; font-size: 12px; font-weight: 700; color: #1C1A16; }
.tbo-pedido-topo em { font-style: normal; width: max-content; font-size: 10px; font-weight: 700; color: #8a6a3f; background: rgba(184,149,106,.16); padding: 3px 8px; border-radius: 999px; }
.tbo-pedido-linha { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px solid #f1efea; font-size: 11.5px; color: #55504A; }
.tbo-pedido-linha b { color: #2FB36B; }

/* texto dos cartões */
.tbo-texto { padding: 22px 22px 24px; }
.tbo-num { font-family: Menlo, monospace; font-size: 12px; color: #B8956A; letter-spacing: .06em; }
.tbo-t { margin: 8px 0 0; font-size: 22px; line-height: 1.15; letter-spacing: -0.02em; font-weight: 750; color: #0B0B0B; }
.tbo-d { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: #55504A; }
.tbo-precos { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid #f0eee9; }
.tbo-precos li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid #f0eee9; font-size: 13.5px; color: #55504A; }
.tbo-precos b { color: #1C1A16; font-weight: 700; white-space: nowrap; }
.tbo-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.tbo-tags span { font-size: 12.5px; font-weight: 600; padding: 6px 11px; border-radius: 999px; background: #F4F3F0; color: #4d4d4d; border: 1px solid #ecebe6; }

/* ---------- fecho ---------- */
.tbo-fecho { padding: clamp(30px, 4vw, 48px) clamp(12px, 2vw, 24px) 0; }
.tbo-fecho-card {
  position: relative; overflow: hidden; border-radius: 20px; padding: clamp(30px, 4vw, 46px);
  background: #14110B; color: #F5F0E8;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.6);
}
.tbo-fecho-card::before {
  content: ""; position: absolute; right: -120px; top: -160px; width: 520px; height: 420px; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(212,165,116,.22), transparent 65%);
}
.tbo-fecho-t { position: relative; margin: 0; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.08; letter-spacing: -0.035em; font-weight: 800; max-width: 22ch; }
.tbo-fecho-t em { color: #E8C49A; }
.tbo-fecho-d { position: relative; margin: 14px 0 0; max-width: 60ch; font-size: 16px; line-height: 1.55; color: rgba(245,240,232,.68); }
.tbo-aviso { margin: 16px 4px 0; font-size: 13px; line-height: 1.5; color: #8f887e; }

/* ---------- responsivo ---------- */
@media (max-width: 980px) {
  .tbo-cards { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
}
@media (max-width: 640px) {
  .tbo { padding-left: 0; padding-right: 0; }
  .tbo-visual { height: 260px; }
}
@media (prefers-reduced-motion: reduce) {
  .tbo-pet { animation: none; }
}