/* Estilo del rectángulo de redes sociales */
        #socialMedia {
            position: fixed;
            right: 10px;
            bottom: 200px;
            width: 60px;
            background-color: rgba(0, 0, 0, 0.7);
            border-radius: 10px;
            padding: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            opacity: 0;
            transform: translateX(100%);
            animation: slideIn 1s forwards;
            z-index: 999; /* Asegura que esté siempre por encima */
          }

          /* Animación para deslizar el rectángulo desde la derecha */
          @keyframes slideIn {
            0% {
              transform: translateX(100%);
            }
            100% {
              transform: translateX(0);
              opacity: 1;
            }
          }
          
          /* Estilo de los íconos de redes sociales */
          .social-icon {
            display: block;
            margin: 10px 0;
            font-size: 24px;
            color: white;
            transition: transform 0.3s ease;
          }
       /* Efecto hover para los iconos */

       .social-icon:hover {
       transform: scale(1.2);
        }
      /* Colores para cada red social */
  .facebook { color: #3b5998; }
  .twitter { color: #1da1f2; }
  .instagram { color: #e4405f; }
  .youtube { color: #ff0000; }


    /* Contenedor flotante */
  #CsocialMedia {
    position: fixed;
    right: 20px;
    bottom: 40px;
    z-index: 999;
    animation: CslideIn 1s forwards;
    transform: translateX(100%);
    opacity: 0;
  }

  @keyframes CslideIn {
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }

  /* Botón horizontal */
  .CconsultaTramite {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(to right, #4f46e5, #6366f1);
    color: white;
    text-decoration: none;
    padding: 12px 20px;
    border-radius: 50px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    font-weight: 600;
    font-size: 30px;
    transition: transform 0.3s ease, background 0.3s ease;
  }

  .CconsultaTramite i {
    font-size: 20px;
  }

  .CconsultaTramite:hover {
    transform: scale(1.05);
    background: linear-gradient(to right, #4338ca, #4f46e5);
  }