/* static/css/corpo4.css
   Bloco 4 — Linha do tempo (renomeado para bloco_4_index-)
   Cole este arquivo em static/css/corpo4.css
*/

/* === Variáveis globais === */
:root {
  --control-gutter: 64px;
  --card-width: 430px;
  --card-gap: 0px;
  --parallax: 0.78;
  --stage-gutter: 96px;
  --fg: 255, 255, 255;
  --muted-white: 255, 255, 255;
  --accent: 245, 25, 25;
}

/* Reset mínimo */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Montserrat", Inter, system-ui, -apple-system, "Segoe UI", Roboto;
}

/* ========== LAYOUT / ESTRUTURA ========== */
.bloco_4_index-secao-timeline {
  padding: 0;
}

.bloco_4_index-wrap {
  width: 100%;
  padding: 0 20px;
}

/* viewport fixa onde a timeline é "pinada" pelo ScrollTrigger */
.bloco_4_index-viewport {
  position: relative;
  height: 100vh;
  overflow: hidden;
  padding: 100px var(--control-gutter);
  outline: none;
  background: transparent;
}

/* palco/estágio onde a faixa e o background residem */
.bloco_4_index-palco {
  position: relative;
  width: 100%;
  height: calc(100vh - 200px);
  overflow: visible;
}

/* imagem de background decorativa (parallax) */
.bloco_4_index-bg {
  position: absolute;
  left: 0;
  margin-top: 50vh;
  margin: 50vh 0 0 0;
  transform: translateY(-50%) translateX(0);
  height: 200px;
  width: auto;
  max-width: 1400px;
  max-height: 320px;
  pointer-events: none;
  user-select: none;
  will-change: transform;
  z-index: 0;
  opacity: 0.95;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.22));
  object-fit: contain;
}

/* faixa horizontal (track) que conterá os cards */
.bloco_4_index-faixa {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--card-gap);
  height: 80%;
  z-index: 2;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

/* espaçamento inicial/final na faixa */
.bloco_4_index-faixa::before {
  content: '';
  display: block;
  width: calc(var(--stage-gutter));
  height: 1px;
}

.bloco_4_index-faixa::after {
  content: '';
  display: block;
  width: 160px;
  height: 1px;
}

/* item de introdução (texto antes dos cards) — valor base */
.bloco_4_index-intro-item {
  min-width: 420px;
  padding: 10vh 0 0 0; /* valor base (será sobrescrito por media queries de altura) */
  align-self: flex-start;
  z-index: 6;
  transform: scale(1.4); /* valor base */
}

/* também aplicável se estiver dentro de um escopo .classe3 */
.classe3 .bloco_4_index-intro-item {
  /* nada extra aqui — as media queries abaixo usam seletores combinados */
}

.bloco_4_index-intro-pequeno {
  font-size: 22px;
  color: rgba(var(--muted-white), 0.92);
  display: block;
}

.bloco_4_index-intro-principal {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.bloco_4_index-slash {
  color: #F51919;
  font-weight: 800;
  font-size: 55px;
}

.bloco_4_index-intro-titulo {
  margin: 0;
  font-size: 64px;
  font-weight: 700;
  color: rgba(var(--fg), 1);
}

.bloco_4_index-intro-sub {
  margin-top: 6px;
  font-size: 14px;
  color: rgba(var(--fg), 0.85);
  max-width: 420px;
}

/* card item da timeline */
.bloco_4_index-item {
  min-width: var(--card-width);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 28px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  box-sizing: border-box;
  cursor: pointer;
  opacity: 0.86;
  transition: transform .36s cubic-bezier(.2, .9, .25, 1), opacity .36s, box-shadow .28s;
  backdrop-filter: blur(6px) saturate(115%);
  text-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
  margin: 0px 50px 0px 50px;
}

/* mapeamento do ID de exemplo (ajustado) */
#bloco_4_index-card-4 {
  margin: 0px 0px 0px 300px;
}

.bloco_4_index-item-icone {
  width: 50px;
  height: 50px;
  flex: 0 0 36px;
  object-fit: contain;
  margin-right: 12px;
}

.bloco_4_index-item-corpo {
  display: block;
}

.bloco_4_index-item-titulo {
  margin: 0 0 6px 0;
  font-size: 16px;
  font-weight: 700;
  color: rgba(var(--fg), 1);
}

.bloco_4_index-item-desc {
  margin: 0;
  font-size: 13px;
  color: rgba(var(--fg), 0.86);
  line-height: 1.45;
}

/* posição top / bottom (variações visuais) */
.bloco_4_index-item--top {
  align-self: flex-start;
  margin-top: -36px;
  z-index: 5;
}

.bloco_4_index-item--baixo,
.bloco_4_index-item--bottom {
  align-self: flex-end;
  margin-bottom: -36px;
  z-index: 3;
}

/* estado ativo (quando o card está mais próximo do centro) */
.bloco_4_index-item.active {
  transform: translateY(-8px) scale(1.02);
  opacity: 1;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  z-index: 7;
}

/* flecha/final */
.bloco_4_index-flecha-fim {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(14px);
  opacity: 0;
  pointer-events: none;
  transition: transform .28s ease, opacity .28s ease;
  z-index: 9999;
}

.bloco_4_index-flecha-fim.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* bloco de conteúdo abaixo da timeline (se usado) - renomeado para evitar conflito */
.bloco_4_index-after {
  padding: 80px 20px;
  background: #fff;
  color: #111;
  min-height: 600px;
  margin-top: 40px;
}

/* animação de esconder/mostrar header (global do site) */
.site-header {
  transition: transform 280ms ease, opacity 200ms ease;
}

/* classe aplicada quando o bloco está visível e header deve ser ocultado */
.site-header--hidden {
  transform: translateY(-300%); /* move para cima */
}

/* ========== RESPONSIVIDADE: comportamento mobile (substitui o layout horizontal por vertical) ========== */
@media (max-width: 720px) {
  .bloco_4_index-viewport {
    height: auto;
    padding: 20px;
  }

  .bloco_4_index-palco {
    height: auto;
  }

  .bloco_4_index-bg-wrap {
    position: absolute;
    left: 100px;
    top: 60%;
    transform: translateY(-50%);
    height: 200px;
    pointer-events: none;
    user-select: none;
    will-change: transform;
    z-index: 0;
    opacity: 0.95;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.22));
    padding: 0px 100px;
  }

  .bloco_4_index-bg {
    display: block;
    height: 100%;
    width: 10px;
  }

  .bloco_4_index-bg-wrap::after {
    content: "";
    position: absolute;
    left: 100%;
    top: 0;
    width: 40px;
    height: 100%;
    pointer-events: none;
  }

  .bloco_4_index-faixa {
    display: block;
    gap: 12px;
    width: 100%;
  }

  .bloco_4_index-faixa::before,
  .bloco_4_index-faixa::after {
    display: none;
  }

  .bloco_4_index-intro-item {
    position: static;
    transform: none !important;
    margin-bottom: 12px;
    z-index: 3;
    padding: 0 !important;
  }

  .bloco_4_index-item {
    width: 100%;
    min-width: unset;
    position: static;
    transform: none;
    margin: 0 0 16px 0;
  }

  .bloco_4_index-flecha-fim {
    display: none;
  }
}

/* ========== MEDIA QUERIES POR ALTURA (height) ========== */
/* As regras abaixo usam um seletor combinado para aplicar tanto
   a .bloco_4_index-intro-item quanto ao caso .classe3 .bloco_4_index-intro-item */

/* ===== telas muito pequenas: altura até 600px ===== */
@media (max-height: 600px) {
  .bloco_4_index-intro-item,
  .classe3 .bloco_4_index-intro-item {
    padding: 0vh 0 0 49px;   /* solicitado: 0vh top para 600px */
    transform: scale(1.3);/* solicitado: scale(1.3) para 600px */
    /* no mobile estreito (max-width:720px) transform/padding podem ser sobrescritos */
  }
}

/* ===== telas pequenas/intermediárias: 601px a 944px =====
   (valor sugerido; ajuste se preferir outro comportamento) */
@media (min-height: 601px) and (max-height: 944px) {
  .bloco_4_index-intro-item,
  .classe3 .bloco_4_index-intro-item {
    /* sugestão intermediária — mude conforme preferir */
    padding: 8vh 0 0 49px;
    transform: scale(1.35);
  }
}

/* ===== telas ao redor de 945px de altura (ex.: 945px) ===== */
@media (min-height: 945px) and (max-height: 1149px) {
  .bloco_4_index-intro-item,
  .classe3 .bloco_4_index-intro-item {
    padding: 13vh 0 0 49px; /* valor indicado para ~945px */
    transform: scale(1.4);
  }
}

/* ===== telas ao redor de 1150px de altura ===== */
@media (min-height: 1150px) and (max-height: 1299px) {
  .bloco_4_index-intro-item,
  .classe3 .bloco_4_index-intro-item {
    padding: 18vh 0 0 49px; /* valor indicado para ~1150px */
    transform: scale(1.4);
  }
}

/* ===== telas com 1300px de altura ou mais ===== */
@media (min-height: 1300px) {
  .bloco_4_index-intro-item,
  .classe3 .bloco_4_index-intro-item {
    padding: 20vh 0 0 59px; /* valor indicado para 1300px+ (sem padding-left) */
    transform: scale(1.4);
  }
}