.lfr-layout-structure-item-container {padding: 0;}.lfr-layout-structure-item-row {overflow: hidden;}/* ==========================================================================
   1. BARRA DE ROLAGEM E CONTAINER (Timeline no Liferay)
   ========================================================================== */
.timeline {
  max-height: 80vh; /* Limita a altura para scroll interno no Liferay */
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;

  /* Suporte Padrão (Firefox e navegadores modernos) */
  scrollbar-width: thin;
  scrollbar-color: #0b5fff #f1f1f1;
}

/* Personalização do Scrollbar Webkit (Chrome, Edge, Safari) */
.timeline::-webkit-scrollbar {
  width: 8px;
}

.timeline::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.timeline::-webkit-scrollbar-thumb {
  background: #0b5fff; /* Azul Liferay */
  border-radius: 4px;
}

.timeline::-webkit-scrollbar-thumb:hover {
  background: #0040b0;
}

/* ==========================================================================
   2. OTIMIZAÇÃO DE PERFORMANCE (Páginas Extensas)
   ========================================================================== */
.line {
  /* Adia o processamento do DOM dos anos que estão fora da viewport */
  content-visibility: auto;
  contain-intrinsic-size: 1px 400px; /* Altura estimada de cada bloco de ano */
}

/* ==========================================================================
   3. LAZY LOADING DE IMAGENS E SKELETON PLACEHOLDER
   ========================================================================== */
.img-trofeu {
  object-fit: cover;
  background-color: #e9ecef; /* Skeleton enquanto a imagem não carrega */
  border-radius: 8px;
  display: block;
  transition: opacity 0.3s ease-in-out;
}

/* Imagens com lazy loading nativo */
.img-trofeu[loading="lazy"] {
  will-change: opacity;
}

/* ==========================================================================
   4. ESTRUTURA VISUAL DA TIMELINE E CARDS
   ========================================================================== */
.wrapper {
  width: 100%;
  margin: 0 auto;

}


.milestone {
  font-size: 2rem;
  font-weight: 700;
  color: #0b5fff;
  margin-bottom: 1.25rem;
  border-bottom: 2px solid #e9ecef;
  padding-bottom: 0.5rem;
}

.card {
  background: #ffffff;
height: 100%;
 border: 1px solid #e9ecef;
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.card-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;

}


/* Ajuste Responsivo para Celulares */
@media (max-width: 768px) {
  .card-col {
    flex: 1 1 100%;
  }
}.lfr-layout-structure-item-928b62b4-d574-476a-842e-c1001fff1c4a {
background-position: 50% 50%; background-repeat:no-repeat; background-size: cover; background-image: var(--lfr-background-image-928b62b4-d574-476a-842e-c1001fff1c4a) !important;
border-style: solid; border-width: 0 !important; border-width: 0px !important;
padding-bottom: var(--spacer-3,1rem) !important;
padding-top: var(--spacer-3,1rem) !important;
text-align: center !important;
}