.background-image {
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    z-index: 1; 
  }
.full-screen-slider-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: #000;
}

.full-screen-slider-item,
.background-video,
.background-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.full-screen-slider-item {
  opacity: 0;
  transition: opacity 1s ease-in-out;
  z-index: 1;
  pointer-events: none;
  visibility: hidden;
}

.full-screen-slider-item.active {
  opacity: 1;
  z-index: 2;
  pointer-events: auto;
  visibility: visible;
}

.background-video {
  object-fit: cover;
  z-index: 1;
}

.background-overlay {
  background: linear-gradient(to right, rgb(27 27 27 / 65%) 30%, rgb(116 116 116 / 20%) 70%, rgb(255 255 255 / 10%) 100%);
  z-index: 2;
}

.slider-content-wrapper {
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translateY(-50%);
  z-index: 3;
  color: white;
  max-width: 45%;
  padding: 20px;
  box-sizing: border-box;
}

.slider-text-button-container {
  /* Estilos si son necesarios */
}

.slider-text-button-container .description-principal {
  text-align: left;
  color: #ffffff;
  margin-bottom: 15px;
  font-size: 2.8em;
  line-height: 1.1;
  font-weight: bold;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
}

.slider-text-button-container .description-secondary {
  font-size: 1.4em;
  text-align: left;
  margin-top: 0;
  margin-bottom: 25px;
  line-height: 1.5;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.description-principal p:last-child,
.description-secondary p:last-child {
  margin-bottom: 0 !important;
}
.description-principal p:first-child,
.description-secondary p:first-child {
  margin-top: 0 !important;
}

.full-screen-slider-container .wp-block-separator {
  margin: 15px 0 20px 0;
  width: 80%;
  max-width: 80%;
  height: 3px;
  background-color: var(--base-3, #ffffff);
  border: none;
  opacity: 0.9;
}

.slider-button-container .gb-button {
  /* Estilos heredados o personalizados aquí */
}

.full-screen-slider-item .slider-content-wrapper {
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translateY(-50%);
  z-index: 3;
  color: white;
  padding: 5px;
  box-sizing: border-box;
}

/* Descripción Principal: Empieza abajo, invisible */
.full-screen-slider-item .description-principal {
  opacity: 0;
  transform: translateY(30px); /* Empieza 30px abajo */
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  will-change: opacity, transform;
  /* Importante: Párrafos dentro deben permitir la animación */
  /* Si tienes <p> dentro, podrías necesitar aplicar la animación al <p> o asegurar que el contenedor no recorte */
}

/* Separador: Empieza sin ancho desde la izquierda, invisible */
.full-screen-slider-item .wp-block-separator {
  opacity: 0;
  transform: scaleX(0); /* Escala horizontal a 0 */
  transform-origin: left center; /* El escalado empieza desde la izquierda */
  transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
  will-change: opacity, transform;
  /* Hereda tus estilos de separador originales para el estado final */
  margin: 15px 0 20px 0;
  width: 80%;
  max-width: 80%;
  height: 3px;
  background-color: var(--base-3, #ffffff);
  border: none;
  /* Opacidad final será controlada en la regla .active */
}

/* Descripción Secundaria: Empieza arriba, invisible */
.full-screen-slider-item .description-secondary {
  opacity: 0;
  transform: translateY(-30px); /* Empieza 30px arriba */
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  will-change: opacity, transform;
}

/* Contenedor de Botones (Opcional, pero recomendable animarlo también): Empieza abajo/invisible */
.full-screen-slider-item .slider-button-container {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    transition-delay: 0s; /* El retraso de entrada se definirá abajo */
    will-change: opacity, transform;
}

/* --- Elementos Individuales: Estado Activo y Retrasos (Entrada Secuencial) --- */

/* Cuando el slide está activo... */

/* 1. Animar Descripción Principal (con un pequeño retraso inicial) */
.full-screen-slider-item.active .description-principal {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.6s; /* Empieza a animar 0.3s después de que el slide se active */
}

/* 2. Animar Separador (después de que empiece el principal) */
.full-screen-slider-item.active .wp-block-separator {
  opacity: 0.9; /* Tu opacidad original */
  transform: scaleX(1); /* Escala completa */
  transition-delay: 1.2s; /* Empieza a animar 0.6s después (0.3s después del principal) */
}

/* 3. Animar Descripción Secundaria (después de que empiece el separador) */
.full-screen-slider-item.active .description-secondary {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 1.6s; /* Empieza a animar 0.8s después (0.2s después del separador) */
}

/* 4. Animar Botones (después de la descripción secundaria) */
.full-screen-slider-item.active .slider-button-container {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 2.0s; /* Empieza a animar 1.0s después */
}
@media (max-width: 767.98px) {
  /* Ejemplo: podrías querer reducir el desplazamiento inicial en móvil */
  .full-screen-slider-item .description-principal { transform: translateY(20px); }
  .full-screen-slider-item .description-secondary { transform: translateY(-20px); }
  .full-screen-slider-item .slider-button-container { transform: translateY(20px); }

  /* Podrías también ajustar los delays si quieres que sea más rápido en móvil */
  /* .full-screen-slider-item.active .description-principal { transition-delay: 0.2s; } */
  /* .full-screen-slider-item.active .wp-block-separator { transition-delay: 0.4s; } */
  /* .full-screen-slider-item.active .description-secondary { transition-delay: 0.6s; } */
  /* .full-screen-slider-item.active .slider-button-container { transition-delay: 0.8s; } */
}

.full-screen-slider-item.active .slider-content-wrapper {
  opacity: 1;
  transition-delay: 0.5s;
}

.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  background-color: rgba(0, 0, 0, 0.3);
  color: white;
  border: none;
  padding: 15px 18px;
  cursor: pointer;
  font-size: 2em;
  line-height: 1;
  border-radius: 50%;
  transition: background-color 0.3s ease, opacity 0.3s ease;
  user-select: none;
}

.slider-arrow:hover,
.slider-arrow:focus {
  background-color: rgba(0, 0, 0, 0.6);
  outline: none;
}

.slider-arrow-prev { left: 30px; }
.slider-arrow-next { right: 30px; }

@media (max-width: 991.98px) {
  .slider-content-wrapper {
      left: 8%;
      max-width: 60%;
      padding: 15px;
  }
  .slider-text-button-container .description-principal { font-size: 2.2em; }
  .slider-text-button-container .description-secondary { font-size: 1.2em; }
  .slider-arrow { padding: 12px 15px; font-size: 1.7em; }
  .slider-arrow-prev { left: 15px; }
  .slider-arrow-next { right: 15px; }
}

@media (max-width: 767.98px) {
  .slider-content-wrapper {
      top: auto;
      bottom: 30%;
      left: 50%;
      transform: translateX(-50%);
      width: 80%;
      max-width: none;
      padding: 0px;
      text-align: center;
      border-radius: 5px;
  }

  .slider-text-button-container .description-principal,
  .slider-text-button-container .description-secondary {
      text-align: center;
  }
  .slider-text-button-container .description-principal { font-size: 1.8em; margin-bottom: 10px;}
  .slider-text-button-container .description-secondary { font-size: 1em; margin-bottom: 20px;}

  .slider-button-container {
      display: flex;
      justify-content: center;
      width: 100%;
  }
  .slider-button-container .gb-button { font-size: 0.9rem; padding: 10px 20px; }

  .full-screen-slider-container .wp-block-separator {
      margin: 10px auto 15px auto;
      width: 100px;
  }

  /* .slider-arrow { display: none; } */
}

@media (max-width: 479.98px) {
  .slider-content-wrapper {
      
      width: 80%;
      
  }
  .slider-text-button-container .description-principal { font-size: 1.4em; }
  .slider-text-button-container .description-secondary { font-size: 0.9em; margin-bottom: 15px; }
  .slider-button-container .gb-button { font-size: 0.8rem; padding: 8px 15px; }
  .slider-arrow { padding: 8px 10px; font-size: 1.4em; }
  .slider-arrow-prev { left: 10px; }
  .slider-arrow-next { right: 10px; }
  .full-screen-slider-container .wp-block-separator { margin: 8px auto 12px auto; width: 60%; }
}