/* ============================================================
   SEÇÃO: O QUE TEM DENTRO — abertura da família de dobras
   Um índice, não um resumo. Cada linha é grande o bastante para
   ser lida de longe e leva à dobra que explica aquela frente.
   ============================================================ */

.tbs { position: relative; padding: clamp(70px, 9vw, 120px) 20px 0; }

/* ---------- Cabeçalho ---------- */
.tbs-head {
  max-width: 820px;
  padding: clamp(44px, 5.5vw, 66px) clamp(16px, 3vw, 36px) clamp(34px, 4.4vw, 52px);
}

.tbs-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #e4e4e4;
  box-shadow: 0 2px 5px rgba(28, 26, 22, 0.05);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6f6f6f;
  margin-bottom: 20px;
}

.tbs-eyebrow svg { width: 14px; height: 14px; }

.tbs-title {
  margin: 0;
  font-size: clamp(32px, 5.2vw, 60px);
  line-height: 1.06;
  letter-spacing: -0.035em;
  font-weight: 800;
  color: #1C1A16;
  text-wrap: balance;
}

.tbs-title em {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 400;
  color: #B8956A;
}

.tbs-sub {
  margin: 18px 0 0;
  max-width: 56ch;
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.62;
  color: #6f6f6f;
  text-wrap: pretty;
}

/* ============================================================
   O ÍNDICE
   ============================================================ */
.tbs-indice { position: relative; display: block; }

.tbs-linha {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.05fr) auto;
  align-items: center;
  gap: clamp(16px, 2.6vw, 40px);
  padding: clamp(24px, 3.2vw, 38px) clamp(16px, 3vw, 36px);
  border-top: 1px solid #e4e4e4;
  text-decoration: none;
  transition: background 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.tbs-linha:last-of-type { border-bottom: 1px solid #e4e4e4; }
.tbs-linha:hover { background: #ffffff; }

.tbs-linha-num {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  color: #b3aca0;
  transition: color 0.4s ease;
}

.tbs-linha:hover .tbs-linha-num { color: #B8956A; }

.tbs-linha-nome {
  font-size: clamp(24px, 3.6vw, 42px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 800;
  color: #1C1A16;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.tbs-linha:hover .tbs-linha-nome { transform: translateX(10px); }

.tbs-linha-txt {
  font-size: clamp(14px, 1.8vw, 16px);
  line-height: 1.5;
  color: #6f6f6f;
  text-wrap: pretty;
}

.tbs-linha-seta {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid #e4e4e4;
  color: #b3aca0;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease, border-color 0.4s ease, color 0.4s ease;
}

.tbs-linha-seta svg { width: 16px; height: 16px; }

.tbs-linha:hover .tbs-linha-seta {
  background: #1C1A16;
  border-color: #1C1A16;
  color: #E8C49A;
  transform: translateX(6px);
}

/* ---------- A tela que espia junto do cursor ---------- */
.tbs-espia {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  width: clamp(240px, 24vw, 340px);
  padding: 6px;
  border-radius: 12px;
  background: #0B0B0B;
  border: 1px solid rgba(28, 26, 22, 0.16);
  box-shadow: 0 30px 60px -30px rgba(28, 26, 22, 0.6);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.92) rotate(-2deg);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  will-change: transform;
}

.tbs-espia img { display: block; width: 100%; height: auto; border-radius: 7px; }
.tbs-espia.is-visivel { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-2deg); }

/* ---------- Fecho: a quinta frente ---------- */
.tbs-fecho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding: clamp(30px, 4vw, 46px) clamp(16px, 3vw, 36px);
}

.tbs-fecho-txt { max-width: 62ch; }

.tbs-fecho-txt h3 {
  margin: 0 0 6px;
  font-size: clamp(17px, 2.2vw, 21px);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.25;
  color: #6f6f6f;
  text-wrap: balance;
}

.tbs-fecho-txt h3 strong { color: #1C1A16; font-weight: 800; }

.tbs-fecho-txt p {
  margin: 0;
  font-size: clamp(14px, 1.9vw, 16px);
  line-height: 1.55;
  color: #6f6f6f;
  text-wrap: pretty;
}

/* o aviso de que a página mostra um recorte, não o catálogo inteiro */
.tbs-recorte {
  margin: 0;
  padding: 0 clamp(16px, 3vw, 36px) clamp(34px, 4.4vw, 52px);
  font-size: clamp(14px, 1.9vw, 16px);
  line-height: 1.6;
  color: #8a8378;
  text-wrap: pretty;
}

.tbs-recorte strong { color: #1C1A16; font-weight: 700; }

.tbs-fecho-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 999px;
  background: #1C1A16;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s;
}

.tbs-fecho-link:hover { transform: translateY(-2px); background: #2A2620; }
.tbs-fecho-link svg { width: 15px; height: 15px; transition: transform 0.25s; }
.tbs-fecho-link:hover svg { transform: translateX(4px); }

/* ---------- Responsivo ---------- */
@media (max-width: 900px) {
  /* sem cursor não há o que espiar: a tela vira miniatura fixa na linha */
  .tbs-linha {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "num nome seta"
      ".   txt  .";
    row-gap: 8px;
  }
  .tbs-linha-num { grid-area: num; }
  .tbs-linha-nome { grid-area: nome; }
  .tbs-linha-txt { grid-area: txt; }
  .tbs-linha-seta { grid-area: seta; }
  .tbs-linha:hover .tbs-linha-nome { transform: none; }
  .tbs-espia { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tbs-linha, .tbs-linha-nome, .tbs-linha-seta, .tbs-espia { transition: none; }
}