.corporatiu {
    background-color: #36c6d3 !important;
    color: #fff;
}

.corporatiu :hover {
    background-color: #ecd97a !important;
    color: #fff;
}

.btn:hover {
    color: #fff;
}

.btn-success {
    color: #fff;
    background-color: #36c6d3 !important;
    border-color: #36c6d3 !important;
}


/*--------------------------------------------------------*/


/* Definir una propiedad CSS animable */
@property --a {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
  }
  
  /* Animación de rotación */
  @keyframes rotating {
    0% { --a: 0deg; }
    100% { --a: 360deg; }
  }
  
  /* Efecto de borde animado */
  .box {
    position: relative;
    width: 100%;
    max-width: 1400px;
    margin: auto;
    padding: 10px;
    background: repeating-conic-gradient(
      from var(--a),
      #ecd97a 0%,
      #ecd97a 5%,
      transparent 5%,
      transparent 40%,
      #ecd97a 50%
    );
    filter: drop-shadow(0px 10px 25px rgba(0, 0, 0, 0.12));
    border-radius: 20px;
    animation: rotating 15s linear infinite;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.5s;
  }
  
  /* Segunda capa del borde animado */
  .box::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: repeating-conic-gradient(
      from var(--a),
      #36c6d3 0%,
      #36c6d3 5%,
      transparent 5%,
      transparent 40%,
      #36c6d3 50%
    );
    filter: drop-shadow(0px 10px 25px rgba(0, 0, 0, 0.12));
    border-radius: 20px;
    animation: rotating 15s linear infinite;
    animation-delay: -1s;
  }
  
  /* Contenedor interno con fondo sólido */
  .box::after {
    content: "";
    position: absolute;
    inset: 4px;
    background: #fff;
    border-radius: 15px;
    border: 8px solid #ddd;
  }
  
  /* Asegurar que la tarjeta se mantenga sobre el efecto */
  .box .card {
    position: relative;
    z-index: 2;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 15px;
    padding: 20px;
  }