.body-background-negro {
      min-height: 100vh;
      background-image: url(''), linear-gradient(to bottom, rgba(9, 27, 23, 1), rgba(36, 75, 67, 1), rgba(123, 252, 198, 1), rgba(247, 247, 247, 1));
      background-size: 140vh, cover;
      background-position: top;
      background-repeat: no-repeat;
      overflow-x: hidden;
    }

    .body-background-negro {
      min-height: 100vh;
      background-image:
        url(''),
        linear-gradient(to bottom,
          rgba(9, 27, 23, 1) 0%,
          rgba(13, 38, 32, 1) 10%,
          rgba(25, 57, 48, 1) 20%,
          rgba(36, 75, 67, 1) 30%,
          rgba(46, 92, 82, 1) 40%,
          rgba(58, 112, 100, 1) 50%,
          rgba(73, 145, 125, 1) 60%,
          rgba(87, 179, 145, 1) 70%,
          rgba(105, 215, 170, 1) 80%,
          rgba(123, 252, 198, 1) 85%,
          rgba(180, 255, 223, 1) 92%,
          rgba(247, 247, 247, 1) 100%);
      background-size: 140vh, cover;
      background-position: top;
      background-repeat: no-repeat;
    }

     .body-background-blanco {
    min-height: 100vh;
    background-image: linear-gradient(180deg, #DAFFF7, #FFFFFF);
    background-size: 100%;  
    background-position: top, top, center;
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-blend-mode: multiply;
    overflow-x: hidden !important;
    }
    
.promo-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-top: 1px solid white;
  border-bottom: none; /* quitamos la línea inferior */
  padding: 20px;
  margin: 30px auto;
  gap: 20px;
  max-width: 960px;
  width: 100%;
}

.promo-image {
  width: 100%;
  max-width: 300px; /* Tamaño más pequeño */
  flex-shrink: 0;
}

.promo-image a {
  display: block;
  text-decoration: none;
}

.promo-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3; /* Relación de aspecto consistente */
  object-fit: cover;   /* Recorta y centra la imagen si no se ajusta exactamente */
  border-radius: 8px;
  display: block;
  transition: transform 0.3s ease, opacity 0.3s ease;
  cursor: pointer;
}

.promo-image a:hover img {
  transform: scale(1.02);
  opacity: 0.9;
}

/* promo-content + flecha alineados horizontalmente */
.promo-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 15px;
}

.promo-content {
  flex: 1;
}

.promo-content h2 a {
  text-decoration: none;
        font-family: Fira Sans !important;
        font-weight: 100;
        color: white;
        line-height: 1;
        font-size: 37px;
}

.promo-content p
{
  font-family: Fira Sans !important;
  font-weight: 200;
  color: white;
  line-height: 1;
  font-size: 22px;
}

/* Flecha */
.promo-arrow {
  font-size: 2rem;
  transition: transform 0.3s ease;
  white-space: nowrap;
    padding-bottom: 13.8888vw;
}

.promo-arrow a {
  color: white;
  text-decoration: none;
  display: inline-block;
}

.promo-arrow a:hover {
  animation: moveRight 0.6s infinite alternate;
}

.promo-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
}

.promo-header h2 {
  margin: 0;
}

.promo-header p {
  margin-top: 10px;
  font-size: 22px;
  font-weight: 200;
  color: white;
  font-family: Fira Sans !important;
}

.promo-arrow {
  font-size: 2rem;
  transition: transform 0.3s ease;
  white-space: nowrap;
  margin-top: 5px;
}

.promo-arrow a {
  color: white;
  text-decoration: none;
  display: inline-block;
}

.promo-arrow a:hover {
  animation: moveRight 0.6s infinite alternate;
}

.blog-meta {
  font-family: Fira Sans, sans-serif;
  font-weight: 300;
  font-size: 13px;
  color: white;
  margin-top: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.blog-meta-link {
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.blog-meta-link:hover {
  opacity: 0.7;
}

.blog-meta-link .blog-meta {
  cursor: pointer;
}

.promo-titulo
{
    padding-bottom: 6.9444vw;
}

 h1.hero-titleBlogOscuro {
   font-size: 5.8333vw !important;
 }

 .blog-container.scrolled .promo-content h2 a,
.blog-container.scrolled .promo-content p,
.blog-container.scrolled .promo-content .blog-meta {
  color: #244B43 !important;
}

.blog-container.scrolled .promo-arrow a {
  color: #244B43 !important;
}

/* Cambia el borde cuando se hace scroll */
.blog-container.scrolled .promo-card {
  border-top: 1px solid #000 !important;
  transition: border-color 0.5s ease; /* Efecto suave */
}

@keyframes moveRight {
  0% { transform: translateX(0); }
  100% { transform: translateX(8px); }
}

.blog-container {
  max-width: 100%;
  padding: 0 15px;
  padding-top: 17.3611vw;
}

/* Responsivo */
@media (max-width: 768px) {
  .promo-body {
    flex-direction: column;
    align-items: flex-start;
  }

  .promo-arrow {
    font-size: 1.8rem;
    margin-top: 10px;
  }
}

@media (max-width: 480px) {
  .promo-content h2 {
    font-size: 1.4rem;
  }

  .promo-arrow {
    font-size: 1.5rem;
  }

    .promo-body {
    flex-direction: column;
    align-items: flex-start;
  }

  .promo-image {
    max-width: 100%; /* Permite que la imagen se ajuste en móviles */
  }
}